Ejemplo de Firefox 3.7 y multitouch

Una de las características del navegador web Firefox 3.7 es la posibilidad de aprovechar los dispositivos multitouch (multitáctiles).

En este caso vemos a un usuario, durante el pasado MozCamp en Chile, utilizando esta característica en su portátil multitáctil con Firefox 3.7 y un pequeño JavaScript (vemos el código fuente después del vídeo), para dibujar con los dedos el logo de Firefox:

[vimeo 7026562]

El código fuente del JavaScript utilizado:

var canvasctx = null;

function initCanvas(ww,hh)
{
gCanvas = document.getElementById(«canvas»);
var w = ww;
var h = hh;
gCanvas.style.width = w + «px»;
gCanvas.style.height = h + «px»;
gCanvas.width = w;
gCanvas.height = h;
canvasctx = gCanvas.getContext(«2d»);
canvasctx.clearRect(0, 0, w, h);
// imageData = gCtx.getImageData( 0,0,320,240);
}

var canvasctx = null;

function load() {
initCanvas(1200,800);
document.multitouchData=true;
}

gColor=»0,0,0″;

function color(rr,gg,bb) {
gColor = rr+»,»+gg+»,»+bb;
}

function listenTo(event) {
canvasctx.fillStyle=’rgba(‘+gColor+’,.1)’;
canvasctx.beginPath();
canvasctx.arc(event.clientX, event.clientY, 20, 0, Math.PI*2, 1);
canvasctx.fill();
canvasctx.closePath();
}

document.addEventListener(«MozTouchMove», listenTo, false);

Fuente: Tech Source from Bohol.

var canvasctx = null;

function initCanvas(ww,hh)
{
gCanvas = document.getElementById(«canvas»);
var w = ww;
var h = hh;
gCanvas.style.width = w + «px»;
gCanvas.style.height = h + «px»;
gCanvas.width = w;
gCanvas.height = h;
canvasctx = gCanvas.getContext(«2d»);
canvasctx.clearRect(0, 0, w, h);
// imageData = gCtx.getImageData( 0,0,320,240);
}

var canvasctx = null;

function load() {

initCanvas(1200,800);

document.multitouchData=true;

}

gColor=»0,0,0″;

function color(rr,gg,bb) {
gColor = rr+»,»+gg+»,»+bb;
}

function listenTo(event) {
canvasctx.fillStyle=’rgba(‘+gColor+’,.1)’;
canvasctx.beginPath();
canvasctx.arc(event.clientX, event.clientY, 20, 0, Math.PI*2, 1);
canvasctx.fill();
canvasctx.closePath();
}

document.addEventListener(«MozTouchMove», listenTo, false);