Si se ha visto el vídeo completo se puede notar que la animación tiene un movimiento en el eje Y. Sin embargo en UrlGeek modificamos los movimientos para que sean en el eje X y Y. El resultado final lo podemos ver a continuación:
Código Fuente.
El código no está nada difícil de entender, para cualquier consulta no duden en comentar.
<html>
<head>
<title>Animacion</title>
<meta charset="utf-8">
<style>
canvas{
border:solid;
}
</style>
<script>
var velocidad=5;
var direccionx=velocidad;
var direcciony=velocidad;
var iniciar=false;
var x=50;
var y=20;
var r=15;
var intervalo;
var dirx=true;
var diry=false;
window.addEventListener('load',init);
function init(){
var canvas=document.getElementById('micanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='rgb(200,0,0)';
ctx.arc(x,y,r,0,7);
ctx.fill();
document.getElementById('boton').addEventListener('click',control);
function control(){
if(iniciar){
this.value='Iniciar';
window.clearInterval(intervalo);
iniciar=false;
}else{
this.value='Detener';
intervalo=window.setInterval(function(){moveAndDraw(canvas,ctx);},32);
iniciar=true;
}
}
}
function draw(canvas,ctx,x,y){
canvas.width=canvas.width;
ctx.fillStyle='rgb(200,0,0)';
ctx.arc(x,y,r,0,7);
ctx.fill();
}
function moveAndDraw(canvas,ctx){
if(dirx){
x+=direccionx;
if(x>(canvas.width-20)){
direccionx=-velocidad;
dirx=false;
diry=true;
}
if(x<20) {
direccionx=velocidad;
dirx=false;
diry=true;
}
}
if(diry){
y+=direcciony;
if(y>(canvas.height-20)){
direcciony=-velocidad;
diry=false;
dirx=true;
}
if(y<20) {
direcciony=velocidad;
diry=false;
dirx=true;
}
}
draw(canvas,ctx,x,y);
}
</script>
</head>
<body>
<canvas id="micanvas">
Tu navegador no soporta canvas
</canvas>
<input type="button" value="Iniciar" id="boton">
</body>
</html>
Compartí este post con tus amigos!
...o también puedes seguir el blog en:
2 comentarios:
en dado caso que yo no quiera poner boton, se puede hacer con las teclas? es decir, para iniciar presiono S y para detener presiono D.... es posible?
como podría cambiar el circulo por cuadrado?
Compartí tu opinión con los demás, deja un comentario. ↓
Los comentarios no son moderados, sin embargo si contienen insultos o son ofensivos, pueden ser borrados.