<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid
#d3d3d3;">
</canvas>
<script>
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
ctx.clearRect(0,0,400,400);
ctx.beginPath();
for (let y = 0; y <= 400; y += 50) {
for (let x = 0; x <= 400; x += 50) {
ctx.moveTo(0, y);
ctx.lineTo(400, y);
ctx.moveTo(x, 0);
ctx.lineTo(x, 400);
}
ctx.stroke();
}
let X = 0;
let Y = 0;
let cr = 'rgb('+
Math.floor(Math.random()*256)+','+
Math.floor(Math.random()*256)+','+
Math.floor(Math.random()*256)+')';
setInterval(function() {
ctx.fillStyle = cr;
ctx.fillRect(X,Y,49,49);
X = X + 50;
if (X > 400){
cr = 'rgb('+
Math.floor(Math.random()*256)+','+
Math.floor(Math.random()*256)+','+
Math.floor(Math.random()*256)+')';
X = 0;
Y = Y + 50;
}
}, 100);
</script>
</body>
</html>
| 