.jpg)
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>
<body onmousemove="pintar(event)" style="margin:0;padding:0;">
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;
function pintar(e){ posx = e.clientX; posy = e.clientY; ctx.fillStyle = "#FFF"; ctx.fillRect (posx, posy, 3, 3); }
No olviden escribir su comentario!!!
Gracias
ResponderEliminarEs una buena opción básica, ¿Pero por qué no enseñar una más bonita y funcional? No es tan complicado.
ResponderEliminarTan 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
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.
ResponderEliminarYo también aprendo mientras voy haciendo el tutorial, simplemente los escribo por si hay alguna persona que le ayude.
sin embargo muchas gracias =D
que excelente tutorial amigo, saludos
ResponderEliminarBuenas. 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??.
ResponderEliminarEs decir que todo lo escrito se pueda guardar como una nueva imagen y almacenarla en la BD.
como lo puedo guardar como imagen?
ResponderEliminar