canv

Canvas Drag and Drop Test



var canvas;
var ctx;
var x = 75;
var y = 50;
var WIDTH = 400;
var HEIGHT = 300;
var dragok = false;

function rect(x,y,w,h) {ctx.beginPath();
ctx.rect(x,y,w,h);
ctx.closePath();
ctx.fill();
}

function clear() {
ctx.clearRect(0, 0, WIDTH, HEIGHT);
}

function init() {
canvas =document.getElementById("canvas");
ctx = canvas.getContext("2d");
return setInterval(draw, 10);
}

function draw() {
clear();
ctx.fillStyle = "#FAF7F8";
rect(0,0,WIDTH,HEIGHT);
ctx.fillStyle ="#444444";
rect(x - 15, y - 15, 30, 30);
}

function myMove(e){
if (dragok){
x = e.pageX - canvas.offsetLeft;
y = e.pageY - canvas.offsetTop;
}
}

function myDown(e){
if(e.pageX < x + 15 + canvas.offsetLeft && e.pageX > x - 15 +
canvas.offsetLeft && e.pageY < y + 15 + canvas.offsetTop &&
e.pageY > y -15 + canvas.offsetTop){
x = e.pageX - canvas.offsetLeft;y = e.pageY - canvas.offsetTop;
dragok = true;
canvas.onmousemove = myMove;
}
}

function myUp(){
dragok = false;
canvas.onmousemove = null;
}

function here()
{init();
canvas.onmousedown = myDown;
canvas.onmouseup = myUp;
}






This text is displayed if your browser does not support HTML5 Canvas.






Así se vería si copiasy pegas el codigo en un archivo html:





Referencias


http://html5.litten.com/how-to-drag-and-drop-on-an-html5-canvas/


Publicado por Hazael Fernando Mojica García en 6:49 0comentarios
Enviar por correo electrónicoEscribe un blogCompartir con TwitterCompartir con FacebookCompartir en Pinterest
Enlaces a esta entrada
Etiquetas: PROGRAMACION
domingo, 11 de noviembre de 2012Compilar Assembler x86 en Linux 64bits
Bueno, acá en la universidad en la que estoy de intercambio estamos intentando aprender ensamblador para procesadores 8086, así es, lo básico de lo básico....