console
let canvas = document.querySelector('#c');
canvas.width= 500;
canvas.height = 500;
draw(canvas)
function draw(canvas){
let ctx = canvas.getContext('2d');
let width = canvas.width;
let height = canvas.height;
ctx.lineWidth=3
drawRect({ctx,width,height,count:width/10});
setInterval(()=>{
canvas.width = canvas.width;
ctx.lineWidth=3
drawRect({ctx,width,height,count:width/10});
},100)
}
function drawRect({ctx,width,height,count}){
for(let i=0;i<count;i++){
let point = [randomNum(0,width),randomNum(0,height)];
let size = [randomNum(10,width/4),randomNum(10,width/4)];
ctx.strokeStyle = new Color().color
ctx.strokeRect(...point,...size);
}
}
function Color(){
this.r = Math.floor(Math.random()*255);
this.g = Math.floor(Math.random()*255);
this.b = Math.floor(Math.random()*255);
this.color = 'rgba('+ this.r +','+ this.g +','+ this.b +',0.8)';
}
function randomNum(minNum, maxNum) {
switch (arguments.length) {
case 1:
return parseInt(Math.random() * minNum + 1, 10);
break;
case 2:
return parseInt(Math.random() * ( maxNum - minNum + 1 ) + minNum, 10);
break;
default:
return 0;
break;
}
}
<html>
<body>
<canvas id="c" ></canvas>
</body>
</html>
#c{
background: black;
}