Una de las novedades de HTML5 es el objeto canvas. Hoy vamos a aprovecharlo para dibujar un poquito con él gracias a Jquery, que nos permite ejecutar funciones según el ratón se mueve, gracias al evento mousemove.

Si queréis un poco de información básica sobre canvas os recomiendo esta entrada de Vagabundia.


var canvas,
ctx,
color="rgba(0,0,0,.2)",
miPrimerPincelPropiamentePropio={
xAnt:0,//Posiciones anteriores
yAnt:0,

init:function(){
//Aquí irían las configuraciones no variables
canvas.width=400;
canvas.height=300;
//grosor de la línea
ctx.lineWidth=1;
ctx.strokeStyle=color;
ctx.fillStyle=color;
},

dibujo:function (x,y) {
//Configuramos xAnt e yAnt
if(this.xAnt==0||this.yAnt==0){
this.xAnt=x;
this.yAnt=y;
}
//color de la línea y del relleno
//(aunque ahora no hay relleno)
ctx.beginPath();
//nos movemos a la posición actual
ctx.moveTo(x,y);
//Hacemos una línea a la posición anterior
ctx.lineTo(this.xAnt,this.yAnt);
//pintamos la línea
ctx.stroke();
//guardamos los
this.xAnt=x;
this.yAnt=y;
}
}
//cambio de color de prueba
$('#rojo').bind('click',function(e){
ctx.strokeStyle='rgba(255,0,0,.4)';
ctx.lineWidth=4
});

$(function(){//Cogemos canvas y contexto
canvas = document.getElementById('democanvas');
ctx = canvas.getContext('2d');
//iniciamos el pincel
miPrimerPincelPropiamentePropio.init();

$(canvas).bind('mousemove',function(evento){
var canvasOffset=$(canvas).offset(),
//hallamos la posición: page x-y es con respecto al ratón,
//offset con respecto al borde del canvas
posX=Math.floor(evento.pageX-canvasOffset.left),
posY=Math.floor(evento.pageY-canvasOffset.top);
//llamamos a la función de dibujo.
miPrimerPincelPropiamentePropio.dibujo(posX,posY)
});
});

El resultado sería algo así:

Utilizas un navegador no soportado

Y ahora otro de regalo, con formas aleatorias (aunque reconozco que no es demasiado bonito). En verde y rojo gana (se debería de ver más claro):

Utilizas un navegador no soportado

Para terminar, me gustaría deciros que he probado a hacer un fondo de blog a lo Paul Irish, con un pincel de Script-tutorials, pero que no ha salido igual :)