jQuery e Canvas

Oggi proveremo a disegnare sul canvas di html5 con jQuery. Sarà un semplice esempio per iniziare a vedere cosa succede.

Nella pagina mettiamo un canvas, giusto con un bordino csse poi ci concentreremo sugli eventi legati al mouse.

Abbiamo bisgon di riferirci al canvas e impostare una variabile booleana draw a false:

var context = $('#target')[0].getContext('2d');

var draw = false;

Poi ci interessano 4 eventi legati al mouse, due posizioneranno la variabile draw a false (mouseup, mouseout) e uno a true (mousedown).

Quindi se abbiamo premuto e siamo dentro al canvas con mousemove disegniamo prendendo le coordinate del punto in cui sitrova il mouse per tracciare la linea.

$('#target')
.mousedown(function() {
draw = true;
})
.mouseup(function() {
draw = false;
})
.mouseout (function() {
draw = false;
})
.mousemove(function(event) {
var pos = $(this).position();
if(draw){
context.fillRect(event.pageX - pos.left, event.pageY - pos.top, 2, 2);
}
});

L’esempio