I have a code where the shapes in canvas keep changing color but i dont know how to animate it, my code makes it so the color changes only when you refresh it, i added a dynamically added canvas through script, here is my script:
mycanvas = document.getElementById("mycanvas");
var clr=["red", "blue", "green", "yellow"];
var ctx = canvas.getContext("2d");
ctx.fillStyle=clr[Math.floor((Math.random() * 4) + 0)];
ctx.fillRect(300,250,150,250);
ctx.fillStyle=clr[Math.floor((Math.random() * 4) + 0)];
ctx.fillRect(700,250,150,250);
ctx.fillStyle=clr[Math.floor((Math.random() * 4) + 0)];
ctx.fillRect(1100,250,150,250);
ctx.beginPath();
ctx.moveTo(300,500);
ctx.lineTo(1250,500);
ctx.lineTo(1450,720);
ctx.lineTo(100,720);
ctx.closePath();
ctx.fillStyle=clr[Math.floor((Math.random() * 3) + 0)];;
ctx.fill();
ctx.strokeStyle=clr[Math.floor((Math.random() * 3) + 0)];;
ctx.stroke();
Aucun commentaire:
Enregistrer un commentaire