Desde que comecei a trabalhar, escrevi sobre vue, react, regras regulares, algoritmos, pequenos programas, etc., mas nunca escrevi sobre canvas, porque realmente não sei como!
Em 2018, estabeleci uma pequena meta para mim: aprender sobre canvas e conseguir o efeito de usar canvas para conseguir algumas animações que não são fáceis de conseguir com CSS3.
Este artigo é o primeiro ganho com o aprendizado do canvas. A primeira demonstração que muitas pessoas fazem ao aprender o canvas é implementar um relógio. Claro, eu também implementei um, mas em vez de falar sobre isso, falarei sobre um mais interessante e mais simples. uma coisa.
Mantenha pressionado o mouse para desenhar a trajetória precisarEm uma tela, não há nada na tela no estado inicial. Agora, quero adicionar alguns eventos de mouse à tela e usar o mouse para escrever na tela. O efeito específico é mover o mouse para qualquer ponto da tela, manter o mouse pressionado, mover a posição do mouse e você pode começar a escrever!
princípioVamos analisar brevemente a ideia. Primeiro, precisamos de uma tela, depois calculamos a posição do mouse na tela, vinculamos o evento onmousedown e o evento onmousemove ao mouse e desenhamos o caminho durante o movimento. o desenho termina.
Embora esta ideia seja muito simples, existem algumas partes que requerem alguns truques para serem implementadas.
1. É necessário um arquivo html contendo elementos de tela.
Esta é uma tela com largura de 800 e altura de 400. Por que você não escreveu px? Ah, ainda não entendi, é recomendado pelo documento canvas.
<!doctype html><html class=no-js lang=zh> <head> <meta charset=utf-8> <meta http-equiv=x-ua-compatível content=ie=edge> <title>canvas learning< /title> <meta nome=descrição conteúdo=> <meta nome=viewport content=largura=largura do dispositivo, escala inicial=1> <link rel=manifest href=site.webmanifest> <link rel=apple-touch-icon href=icon.png> <link rel=stylesheet href=css/main.css> </head> <body> <canvas id=theCanvas width=800 altura =400></canvas> <script src=js/main.js></script> </body></html>
2. Determine se o ambiente atual suporta canvas.
Em main.js, escrevemos uma função autoexecutável. A seguir está o trecho de código para julgamento de compatibilidade. O corpo principal do código será o núcleo dos requisitos de implementação.
(function() { let theCanvas = document.querySelector('#theCanvas') if (!theCanvas || !theCanvas.getContext) { //Incompatível com canvas return false } else { //Corpo do código}})()3. Obtenha o objeto 2D.
deixe contexto = theCanvas.getContext('2d')4. Obtenha as coordenadas do mouse atual em relação à tela.
Por que precisamos obter esta coordenada? Como o padrão do mouse é obter as coordenadas relativas da janela atual e a tela pode estar localizada em qualquer lugar da página, são necessários cálculos para obter as coordenadas reais do mouse.
A obtenção das coordenadas reais do mouse em relação à tela é encapsulada em uma função. Se você se sentir abstrato, poderá fazer um desenho em um papel de rascunho para entender por que essa operação é necessária.
Normalmente, seria x - rect.left e y - rect.top. Mas por que é realmente x - rect.left * (canvas.width/rect.width)?
canvas.width/rect.width significa determinar o comportamento de dimensionamento no canvas e encontrar o múltiplo de dimensionamento.
const windowToCanvas = (canvas, x, y) => { //Obtém algumas propriedades da janela de distância do elemento canvas, explicadas no MDN let rect = canvas.getBoundingClientRect() //Os parâmetros x e y são passados respectivamente pelo mouse coordenadas de distância da janela e, em seguida, subtraia a distância entre a tela e a esquerda e a parte superior da janela. return { x: x - rect.left * (canvas.width/rect.width), y: y - rect.top * (canvas.height/rect.height) }}5. Com a função da ferramenta na etapa 4, podemos adicionar eventos de mouse à tela!
Primeiro vincule o evento onmousedown ao mouse e use moveTo para desenhar o ponto inicial das coordenadas.
theCanvas.onmousedown = function(e) { //Obtém as coordenadas do ponto onde o mouse é pressionado em relação à tela. let ele = windowToCanvas(theCanvas, e.clientX, e.clientY) //Atribuição de desestruturação de es6 let { x, y } = ele //O ponto inicial do desenho. contexto.moveTo(x, y)}6. Ao mover o mouse, não há evento de pressionamento longo do mouse, como monitorá-lo?
O pequeno truque usado aqui é executar um evento onmousemove (movimento do mouse) dentro do onmousedown, para que o mouse possa ser monitorado e movido.
theCanvas.onmousedown = function(e) { //Obtém as coordenadas do ponto onde o mouse é pressionado em relação à tela. let ele = windowToCanvas(theCanvas, e.clientX, e.clientY) //Atribuição de desestruturação de es6 let { x, y } = ele //O ponto inicial do desenho. context.moveTo(x, y) //Evento de movimento do mouse theCanvas.onmousemove = (e) => { //Obtenha a nova posição da coordenada ao mover, use lineTo para registrar as coordenadas atuais e, em seguida, acaricie para desenhar o ponto anterior para o ponto atual Caminho let ele = windowToCanvas(theCanvas, e.clientX, e.clientY) let { x, y } = ele context.lineTo(x, y) context.stroke() }}7. Ao soltar o mouse, o caminho não será mais desenhado.
Existe alguma forma de evitar os dois eventos monitorados acima no evento onmouseup? Existem muitos métodos. Definir onmousedown e onmousemove como null é um deles. isAllowDrawLine é definido como um valor bool para controlar se a função é executada. Para o código específico, consulte o código-fonte completo abaixo.
Código fonteEle é dividido em 3 arquivos, index.html, main.js e utils.js. A sintaxe do es6 é usada aqui para configurar o ambiente de desenvolvimento, portanto não haverá erros se você copiar o código diretamente. , durante a execução Se ocorrer um erro e o navegador não puder ser atualizado, você poderá alterar a sintaxe es6 para es5.
1.index.html
Foi mostrado acima e não será repetido novamente.
2.main.js
import { windowToCanvas } from './utils'(function() { let theCanvas = document.querySelector('#theCanvas') if (!theCanvas || !theCanvas.getContext) { return false } else { let context = theCanvas.getContext ('2d') deixe isAllowDrawLine = false theCanvas.onmousedown = function(e) { isAllowDrawLine = true deixe ele = windowToCanvas(theCanvas, e.clientX, e.clientY) let { x, y } = ele context.moveTo(x, y) theCanvas.onmousemove = (e) => { if (isAllowDrawLine) { let ele = windowToCanvas(theCanvas , e.clientX, e.clientY) deixe { x, y } = ele context.lineTo(x, y) context.stroke() } } } theCanvas.onmouseup = function() { isAllowDrawLine = false } }})()3.utils.js
/** Obtém as coordenadas do mouse na tela* */const windowToCanvas = (canvas, x, y) => { let rect = canvas.getBoundingClientRect() return { x: x - rect.left * (canvas.width /rect .width), y: y - rect.top * (canvas.height/rect.height) }}exportar { windowToCanvas} ResumirHá um mal-entendido aqui. Eu uso o objeto canvas para vincular o evento theCanvas.onmouseup. Na verdade, o canvas não pode vincular eventos. Mas como o navegador irá julgá-lo automaticamente e entregar o processamento do evento, não há necessidade de se preocupar.
O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.