Desde que comencé a trabajar, he escrito sobre vue, reaccionar, reglas regulares, algoritmos, pequeños programas, etc., pero nunca he escrito sobre lienzo, ¡porque realmente no sé cómo!
En 2018, me propuse un pequeño objetivo: aprender lienzo y lograr el efecto de usar lienzo para lograr algunas animaciones que no son fáciles de lograr con CSS3.
Este artículo es el primer beneficio de aprender Canvas. La primera demostración que muchas personas hacen cuando aprenden Canvas es implementar un reloj. Por supuesto, también implementé uno, pero en lugar de hablar de esto, hablaré de uno más interesante y simple. uno.cosas.
Mantenga presionado el mouse para dibujar la trayectoria. necesidadEn un lienzo, no hay nada en el lienzo en el estado inicial. Ahora, quiero agregar algunos eventos del mouse al lienzo y usarlo para escribir en el lienzo. El efecto específico es mover el mouse a cualquier punto del lienzo, luego mantener presionado el mouse, mover la posición del mouse y ¡puede comenzar a escribir!
principioAnalicemos brevemente la idea. Primero, necesitamos un lienzo, luego calculamos la posición del mouse en el lienzo, vinculamos el evento onmousedown y el evento onmousemove al mouse y dibujamos la ruta cuando se suelta el mouse. termina el dibujo.
Aunque esta idea es muy sencilla, hay algunas partes que requieren algunos trucos para implementarse.
1. Se requiere un archivo html que contenga elementos de lienzo.
Este es un lienzo con un ancho de 800 y una altura de 400. ¿Por qué no escribiste px? Oh, todavía no lo entiendo, lo recomienda el documento del lienzo.
<!doctype html><html class=no-js lang=zh> <head> <meta charset=utf-8> <meta http-equiv=x-ua-compatible content=ie=edge> <title>aprendizaje de lienzo< /título> <meta nombre=contenido de descripción=> <meta nombre=contenido de ventana gráfica=ancho=ancho del dispositivo, escala inicial=1> <enlace rel=manifiesto 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 height =400></canvas> <script src=js/main.js></script> </body></html>
2. Determine si el entorno actual admite lienzo.
En main.js, escribimos una función autoejecutable. El siguiente es el fragmento de código para juzgar la compatibilidad. El cuerpo principal del código será el núcleo de los requisitos de implementación.
(function() { let theCanvas = document.querySelector('#theCanvas') if (!theCanvas || !theCanvas.getContext) { //Incompatible con lienzo return false } else { //Cuerpo del código}})()3. Consigue el objeto 2d.
let contexto = theCanvas.getContext('2d')4. Obtenga las coordenadas del mouse actual en relación con el lienzo.
¿Por qué necesitamos obtener esta coordenada? Debido a que el mouse obtiene de forma predeterminada las coordenadas relativas de la ventana actual y el lienzo se puede ubicar en cualquier lugar de la página, se requieren cálculos para obtener las coordenadas reales del mouse.
La obtención de las coordenadas reales del mouse en relación con el lienzo se encapsula en una función. Si se siente abstracto, puede hacer un dibujo en un papel borrador para comprender por qué se requiere esta operación.
Normalmente, sería x - rect.left e y - rect.top. Pero, ¿por qué en realidad es x - rect.left * (canvas.width/rect.width)?
canvas.width/rect.width significa determinar el comportamiento de escala en el lienzo y encontrar la escala múltiple.
const windowToCanvas = (canvas, x, y) => { //Obtiene algunas propiedades de la ventana de distancia del elemento lienzo, explicadas en MDN let rect = canvas.getBoundingClientRect() //Los parámetros x e y se pasan respectivamente desde el mouse coordenadas de la ventana de distancia, y luego reste la distancia entre el lienzo y la parte izquierda y superior de la ventana. return { x: x - rect.left * (canvas.width/rect.width), y: y - rect.top * (canvas.height/rect.height) }}5. ¡Con la función de herramienta en el paso 4, podemos agregar eventos del mouse al lienzo!
Primero vincule el evento onmousedown al mouse y use moveTo para dibujar el punto inicial de las coordenadas.
theCanvas.onmousedown = function(e) { //Obtiene las coordenadas del punto donde se presiona el mouse en relación con el lienzo. let ele = windowToCanvas(theCanvas, e.clientX, e.clientY) // Asignación de desestructuración de es6 let { x, y } = ele // El punto de partida del dibujo. contexto.moveTo(x, y)}6. Al mover el mouse, no hay ningún evento de pulsación larga del mouse, ¿cómo monitorearlo?
El pequeño truco utilizado aquí es ejecutar un evento onmousemove (movimiento del mouse) dentro de onmousedown, para que el mouse pueda ser monitoreado y movido.
theCanvas.onmousedown = function(e) { //Obtiene las coordenadas del punto donde se presiona el mouse en relación con el lienzo. let ele = windowToCanvas(theCanvas, e.clientX, e.clientY) // Asignación de desestructuración de es6 let { x, y } = ele // El punto de partida del dibujo. context.moveTo(x, y) // Evento de movimiento del mouse theCanvas.onmousemove = (e) => { // Obtenga la nueva posición de las coordenadas al moverse, use lineTo para registrar las coordenadas actuales y luego trace para dibujar el punto anterior la ruta del punto actual let ele = windowToCanvas(theCanvas, e.clientX, e.clientY) let { x, y } = ele context.lineTo(x, y) context.stroke() }}7. Cuando suelte el mouse, la ruta ya no se dibujará.
¿Hay alguna forma de evitar los dos eventos monitoreados anteriormente en el evento onmouseup? Hay muchos métodos. Configurar onmousedown y onmousemove en nulo es uno de los que utilicé aquí. isAllowDrawLine se establece en un valor bool para controlar si se ejecuta la función. Para obtener el código específico, consulte el código fuente completo a continuación.
código fuenteEstá dividido en 3 archivos, index.html, main.js y utils.js. Aquí se utiliza la sintaxis de es6. Utilicé parcle para configurar el entorno de desarrollo, por lo que no habrá errores si copia el código directamente. , cuando se ejecuta Si se produce un error y el navegador no se puede actualizar, puede cambiar la sintaxis de es6 a es5.
1.índice.html
Se ha mostrado arriba y no se repetirá nuevamente.
2.principal.js
importar { windowToCanvas } de './utils'(function() { let theCanvas = document.querySelector('#theCanvas') if (!theCanvas || !theCanvas.getContext) { return false } else { let context = theCanvas.getContext ('2d') let isAllowDrawLine = false theCanvas.onmousedown = function(e) { isAllowDrawLine = true let 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) let { x, y } = ele context.lineTo(x, y) contexto.stroke() } } } theCanvas.onmouseup = function() { isAllowDrawLine = false } }})()3.utils.js
/** Obtener las coordenadas del mouse en el lienzo* */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} ResumirHay un malentendido aquí. Utilizo el objeto lienzo para vincular el evento theCanvas.onmouseup. De hecho, el lienzo no puede vincular eventos. Pero como el navegador lo juzgará automáticamente y entregará el procesamiento de eventos, no hay necesidad de preocuparse en absoluto.
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.