Dibujando con HTML5: interactuar con canvas para dibujar en tiempo real a modo de lapiz o lienas rectas
Ratio: 4 / 5
Hoy un cliente nos ha pedido la posibilidad de que sus navegantes web puedan dibujar lineas rectas en tiempo real para poder comprar mejor los datos que en la web se mostraban. Algo muy sencillo a lo que no le hemos dicho no. Conocíamos la posibilidad en HTML5, concretamente con CANVAS, pero al ponernos a buscar en la red como se interactúa no hemos encontrado documentación; todo lo relativo en castellano habla de el renderizando durante la carga web, así que la aportamos nosotros aquí un pequeño y sencillo ejemplo para interactuar con el dibujado.
Puedes ver un ejemplo aquí.
Este es el código javascript del head:
Mostrar/Ocultar código javascript
function retornarLienzo(x) { var canvas = document.getElementById(x); if (canvas.getContext) { var lienzo = canvas.getContext("2d"); return lienzo; } else return false; } var iniciodibujo=true; function dibujar(event){ x=event.clientX; y=event.clientY; var lienzo=retornarLienzo("lienzo1"); if (lienzo){ lienzo.strokeStyle = "#FF8000"; if (iniciodibujo==true){ lienzo.beginPath(); lienzo.moveTo(x,y); iniciodibujo=false; } if (iniciodibujo==false){ lienzo.lineTo(x,y); lienzo.stroke(); } } } Y esto el canvas en el body:
Mostrar/Ocultar código php<canvas id="lienzo1" width="400" height="300" onmousemove="dibujar(event)"> Su navegador no permite utilizar canvas.</canvas>
Y listo ya puedes ejecutarlo y pintar como en el paint!
(Si quieres sólo lineas rectas sustituye el onMouseMove por un onClick)
Actualuzación: Si desas ver un ejemplo más completo sigue este enlace: dibujar lineas con canvas
