<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
</head>
<body>
<canvas id="canvas" width="500" height="500">
Tu Navegador no soporta Canvas.
</canvas>
<script>
var x = 200;
var y = 300;
var x2 = 80;
var y2 = 80;
var cont = 0;
window.onload = function(){
dibujar(200, 300, 80, 80);
click();
};
function dibujar(x,y,x2,y2){ canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d"); ctx.fillStyle = "green";
ctx.fillRect(x, y, x2, y2);
ctx.fill();
}
canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d"); function click(){//Añadimos un addEventListener al canvas, para reconocer el click
canvas.addEventListener("click", //Una vez se haya clickado se activará la siguiente función
function(e){ /** Las siguientes 2 líneas lo que hacen és saber en que
* parte del canvas se ha clickado. Si ha clickado dentro
* del cuadrado se activará mover().
* La operación que utilizamos es restar la parte izquierda que sobra
* des del canvas asta el explorador (cancas.offsetLeft)
* con el click (e.clientY)
*/
if(e.clientX-canvas.offsetLeft > 200
&& e.clientX-canvas.offsetLeft < 280){ //Aqui lo mismo que en la anterior sólo que miramos alto y
//ancho del cuadrado
if(e.clientY - canvas.offsetTop > 300
&& e.clientY - canvas.offsetTop < 380){ //si ha clickado dentro del cuadro verde
mover();
}
}
}
,false);}
function mover(){ //vamos restando la coordenada Y hasta un límite de 150
if(y>120){ y--;
//es la encargada de llamar cada 10 milesimas a la funcion mover()
//y así crear el efecto de movimiento
setTimeout(mover,10);
}
//tendremos que ir limpiando el canvas
//para evitar que se cree una columna
//por culpa de que los cuadrados se vayan solapando
limpiar();
//dibujamos el cuadrado otra vez con la coordenada Y modificada
//la modificación la hemos creado más arriba
dibujar(x,y,x2,y2);
}
function limpiar(){ ctx.fillStyle = "white";
ctx.fillRect(0, 0, 500, 500);
}
</script>
</body>
</html>
Crear cuenta
Comentarios sobre la versión: 1.0 (0)
No hay comentarios