Hola, para reforzar lo aprendido en este curso me propuse como reto hacer un dibujo que tenga una pequeña animación. Intente dejar muy claras las secciones para que puedan modificarlo si desean. Cualquier consejo es bienvenido :D
<canvas width="900" height="900"></canvas>
<script>
var canvas = document.querySelector("canvas");
var pincel = canvas.getContext("2d");
//Posiciones en X de los Ojos
var ojoIzquierdo = 370;//330-370
var ojoDerecho = 510;//470-510
//Valores de movimiento
var direccion = -1;//indica si el ojo se mueve hacia la derecha o izquierda
var intervalo = 70;//representa el intervalo de tiempo
var velocidad = 2;//indica cuantos pixeles se desplaza al moverse
//Asiganmos un color y dibujamos un cuadrado
function Cuadrado(color , xStart,yStart,width,height){
pincel.fillStyle = color;
pincel.fillRect(xStart,yStart,width,height);
}
//Contorno negro del ninja
Cuadrado("black" , 300,0,300,300);//cabeza
Cuadrado("black" , 150,300,600,600);//torso
//Cabeza
Cuadrado("silver" , 310,10,280,290);//cabeza
Cuadrado("red" , 310,30,280,40);
Cuadrado("bisque" , 310,90,280,80);
//ojos
Cuadrado("white" , 330,110,100,40);
Cuadrado("black" , ojoIzquierdo,110,60,40);
Cuadrado("white" , 470,110,100,40);
Cuadrado("black" , ojoDerecho,110,60,40);
//torso
Cuadrado("grey" , 160,310,580,580);
//brazos
Cuadrado("black" , 300,490,15,400);
Cuadrado("bisque" , 160,690,140,200);
Cuadrado("black" , 585,490,15,400);
Cuadrado("bisque" , 600,690,140,200);
//Para la animacion debemos dibujar superponiendo los ojos para
//simular el movimiento
function reDibujoOjos(){
//ojos
Cuadrado("white" , 330,110,100,40);
Cuadrado("black" , ojoIzquierdo,110,60,40);
Cuadrado("white" , 470,110,100,40);
Cuadrado("black" , ojoDerecho,110,60,40);
}
//Mueve los valores donde se re-dibujaran los ojos
function AnimacionOjos(){
if(ojoDerecho < 471)direccion = 1;
if(ojoDerecho >509)direccion = -1;
ojoDerecho += (velocidad * direccion);
ojoIzquierdo += (velocidad * direccion);
reDibujoOjos();
}
setInterval(AnimacionOjos,intervalo);
</script>