En esta página:
Demo Github
El Lenguaje de marcado HTML 5 unido con JavaScript nos permiten crear aplicaciones muy importantes como una aplicación que permita dibujar con el mouse sobre un elemento canvas de HTML 5, en este Post te mostraré como hacer que sea posible esta característica, vamos con ello.
Antes de continuar con este Post, si quieres aprender o conoces sobre algún amigo o amiga que quiere aprender HTML 5 desde 0, puedes visitar el curso con más de 45 videos totalmente gratis, el Lema de Nube Colectiva es “el conocimiento en la Nube es Colectivo”:
Continuemos con el Post: Como habilitar el Dibujado con el Mouse o Dedos sobre un Canvas HTML 5 en Desktop y Móviles.
Que es un Canvas ?
El termino Canvas traducido al español significa Lienzo, esencialmente es un contenedor para varios elementos gráficos como cuadrados, rectángulos, arcos, imágenes, etc.
También nos brinda un control flexible sobre un determinada animación de sus elementos gráficos dentro del Canvas. Para habilitar la funcionalidad de dibujado con el mouse, se debe de utilizar el Lenguaje de Programación JavaScript.
Habilitando el dibujado con el mouse sobre un canvas HTML 5
Vamos a usar utilizar una variable flag llamada dibujar para habilitar y deshabilitar el dibujo haciendo uso de los eventos del mouse. Los eventos que escucharemos serán los eventos mousedown, mouseup y mousemove en JavaScript.
El elemento canvas por defecto tiene algunas propiedades como padding, etc. (se pueden cambiar pos estilos). Por ende, las propiedades offsetTop y offsetLeft se utilizan para recuperar la posición del lienzo, en relación con su offsetParent (elemento ancestro más cercano del lienzo en el DOM). Al restar los valores de event.clientX y event.clientY, podemos reposicionar el punto de inicio del dibujo en la punta del cursor.
También creamos una función llamada dibujo() en donde utilizaremos los siguientes métodos para darle funcionalidad:
beginPath()
Inicia una nueva ruta cada vez que se hace clic con el botón izquierdo del mouse para dibujar.
lineWidth()
Establece el ancho de la línea que se dibuja en el Canvas.
strokeStyle()
Lo usamos para establecer el color de la línea que se dibuja en el Canvas.
moveTo()
Es la posición de inicio de la ruta que se mueve a diferentes coordenadas al dibujar en el Canvas.
lineTo()
Crea una línea desde una posición hasta las coordenadas determinadas al dibujar en el Canvas.
stroke()
Este agrega un trazo a la línea dibujada en el Canvas. Sin esto, la línea no será visible en el Canvas.
Bien a continuación el código JavaScript que permite que un usuario dibuje líneas sobre un Canvas (En el código he colocado comentarios para explicar que hace cada línea del código):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 |
const canvas = document.querySelector('#micanvas'); const contenedor = canvas.getContext('2d'); // Usamos todo el alto y ancho disponible para el canvas canvas.height = window.innerHeight; canvas.width = window.innerWidth; // Ancho del Trazo contenedor.lineWidth = 5; // Trazo redondeado contenedor.lineCap = 'round'; // Color del trazo del dibujo en el Canvas contenedor.strokeStyle = '#5858ef'; // No permitir dibujar hasta que no presione el botón del mouse let estaDibujando = false; // Desde dónde comenzar una línea y luego dónde terminarla let vectorX = 0; let vectorY = 0; let direccion = true; function dibujo(evento) { //Solo permitir dibujar haciendo clic y arrastrando el puntero del mouse if (!estaDibujando) return; console.log(evento); contenedor.beginPath(); // El cursor para comenzar a dibujar se mueve a esta coordenada contenedor.moveTo(vectorX, vectorY); // Se traza una línea desde el inicio contenedor.lineTo(evento.offsetX, evento.offsetY); // Dibujamos las líneas contenedor.stroke(); [vectorX, vectorY] = [evento.offsetX, evento.offsetY]; if(contenedor.lineWidth >= 80 || contenedor.lineWidth <= 1){ direccion = !direccion; } if(direccion) contenedor.lineWidth++; else contenedor.lineWidth--; } // Eventos del Mouse canvas.addEventListener('mousemove', dibujo); canvas.addEventListener('mousedown', (evento)=>{ // Permitir dibujar cuando se presiona el botón del mouse estaDibujando = true; [vectorX, vectorY] = [evento.offsetX, evento.offsetY]; }); // Eventos del Mouse canvas.addEventListener('mouseup', ()=>estaDibujando = false); canvas.addEventListener('mouseout', ()=>estaDibujando = false); /* Usar Canvas en Dispositivos Móviles */ // Dibujar al tocar la pantalla del dispositivo móvil document.body.addEventListener("touchstart", function(evento) { if (evento.target == canvas) { evento.preventDefault(); clienteX = evento.touches[0].clientX; clienteY = evento.touches[0].clientY; estaDibujando = true; dibujo(clienteX, clienteY) } }, false); // No Dibujar al dejar de tocar la pantalla del dispositivo móvil document.body.addEventListener("touchend", function(evento) { if (evento.target == canvas) { evento.preventDefault(); estaDibujando = false; } }, false); // Permitir desplazarse en la pantalla del dispositivo móvil document.body.addEventListener("touchmove", function(evento) { if (evento.target == canvas) { evento.preventDefault(); evento.offsetX = evento.targetTouches[0].clientX; evento.offsetY = evento.targetTouches[0].clientY; dibujo(evento) } }, false); |
La función dibujo() solo se ejecutará si el valor es true. Es importantes actualizar las coordenadas almacenadas en el objeto coordenadas después de beginPath(), por lo tanto se llama a obtenerPosicion(event).
Ahora en la vista HTML sencillamente colocamos un elemento canvas con el nombre de id micanvas.
|
1 2 3 |
<canvas id="micanvas"></canvas> |
Y le doy los siguientes estilos CSS:
|
1 2 3 4 5 |
#micanvas { border: solid 3px gray; } |
Eso es todo, al inicio del Post, puedes ver una Demo en donde se encuentra la aplicación en funcionamiento y un Repositorio GitHub con el código.
Conclusión
Como puedes ver, hay ciertos métodos de JavaScript que podemos usar para habilitar la funcionalidad de dibujado en un canvas HTML 5, hay otros métodos de JavaScript que también podemos usar para añadirle otras funcionalidades adicionales.
Nota(s)
- El código y lo métodos mostrados en este Post, pueden ser modificados, quedar obsoletos o continuar vigentes, esto no depende de mí, si no de los Desarrolladores que dan soporte a JavaScript y HTML 5.
- No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.
Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.