En este tutorial es fácil de realizar y de poner en práctica. Para entenderlo es necesario saber algo de CANVAS. Lo primero a realizar en este tutorial es crear una CANVAS de un buen tamaño color negro Para lograr el efecto de dibujo a mano alzada en este caso usaremos las coordenadas por donde se mueve el cursor(ratón) y dibujar un cuadrado blanco de 3×3 px. Así cada vez que el cursor se mueva irá dejando el rastro blanco, simulando un pincel.
Como siempre creamos el canvas en HTML:
canvas id="canvas" width="900" height="600"> Su navegador no soporta HTML5 </canvas>
También tendremos que modificar el tag BODY, que será el encargado de llamar a la función de dibujo cada vez que se mueve el cursor:
Como ves también hemos añadido un “style” con margen y padding 0, esto lo hacemos para no tener problemas entre las coordenadas del BODY y las reales.
Empecemos con el JavaScript. Ahora pintaremos el fondo del canvas en negro y crearemos las variables posX y posY donde grabaremos las coordenadas del ratón.
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#000";
ctx.fillRect (0, 0, 900, 600);
var posx = 0;
var posy = 0;
Y ahora la función principal de este tutorial, pintar donde e será el event que le envía el BODY en este caso el cursor. Simplemente lo que hace esta función es dibujar un cuadrado en las coordenadas enviadas por el cursor:
function pintar(e){
posx = e.clientX;
posy = e.clientY;
ctx.fillStyle = "#FFF";
ctx.fillRect (posx, posy, 3, 3);
}
Ver ejemplo AQUI
Visto en Tutorialeshtml5
