martes 22 de marzo de 2011

Dibujar a mano alzada en canvas HTML5

Este tutorial es bastante sencillo de entender y de poner en práctica. Para entenderlo mejor podríais mirar antes el tutorial de Dibujo simple con Canvas. Lo que vamos hacer es crear un canvas de gran tamaño con fondo 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 (como está explicado en Dibujo simple con Canvas) un cuadrado blanco de 3x3 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">
<p>Su navegador no soporta HTML5</p>
</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:
<body onmousemove="pintar(event)" style="margin:0;padding:0;">
Como veis 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 raton.
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 estrella de este tutorial, pintar(e) donde e será el event que le envia el BODY en este caso el cursor. Simplemente lo que hace esta funcion 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);
}
Y con esto acabaríamos. Aquí tenéis el ejemplo para ver el resultado:
No olviden escribir su comentario!!!
Publicado por Victor Maldonado en 16:28

1 comentarios:

Suscribirse a: Enviar comentarios (Atom)