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!!!

6 comentarios:

  1. Es una buena opción básica, ¿Pero por qué no enseñar una más bonita y funcional? No es tan complicado.

    Tan solo se requieren tres escuchas: MouseDown, MouseUp y MouseMove. Además de una variable booleana Drawing.

    En MouseDown, Drawing se hace verdadera, comienza el ctx.beginPath(), se mueve ctx.moveTo(e.clientX,e.clientY). En MouseUp, Drawing se hace falsa y termina el ctx.closePath(), y en MouseMove, si Drawing es verdadero, se hace un ctx.lineTo(e.clientX,e.clientY) y se dibuja con ctx.stroke().

    Con esto, se conseguiría una herramienta de dibujo que en verdad aparente la función de un lápiz, más que un trayecto de rectángulos =P. Te dejo un ejemplo de como quedaría: http://ayotli.com/test/paint-canvas.html

    ResponderEliminar
  2. Muchas gracias por tu comentario, se que hay maneras mas optimas y recomendables de hacer. Pero intento lo mejor que puedo hacer entender un poco el funcionamiento simple para que ya la gente vaya modificando y aprendiendo sobre la marcha.

    Yo también aprendo mientras voy haciendo el tutorial, simplemente los escribo por si hay alguna persona que le ayude.

    sin embargo muchas gracias =D

    ResponderEliminar
  3. que excelente tutorial amigo, saludos

    ResponderEliminar
  4. Buenas. perdona me podrías indicar como tener una imagen de fondo y encima poder escribir y después guardar todo eso en una imagen con la modificación echa??.
    Es decir que todo lo escrito se pueda guardar como una nueva imagen y almacenarla en la BD.

    ResponderEliminar
  5. como lo puedo guardar como imagen?

    ResponderEliminar