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.
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);