<!doctype html>
<html>
<head>
<title>canvasExample</title>
<meta charset='utf-8' />
</head>
<body onload="setInterval('myfunc()', 100)" >
<canvas height='700' width='700' id='example'></canvas>
<script>
let s = 0;
const canvas = document.querySelector('#example');
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#' + Math.floor(Math.random()*16777215).toString(16);
function myfunc(){
let narray = [];
for (let q = 0 ;q <7;q++){
narray.push(Math.floor(Math.random() * 700));
}
ctx.clearRect(0,0,700,700);
for (let q = 0 ;q <7;q++){
for (let i = 0; i < 700; i+=100){
if (q == i/100){
ctx.fillStyle = '#' + Math.floor(Math.random()*16777215).toString(16);
ctx.fillRect(0,i,narray[q],50)
}
}
}
}
</script>
</body>
</html>
| 