canvas 绘画随机点

直接看图吧;

这样的随机点,是小圆点组成的,然后一直在动,记录一下,万一以后要用到呢;

canvas的具体设置我就不写了,另一篇文档里有;

drawRandomDot () {
let leftCanvas = this.leftCanvas.nativeElement;
let leftContext = leftCanvas.getContext("2d");
let rightCanvas = this.rightCanvas.nativeElement;
let rightContext = rightCanvas.getContext("2d");
if(this.dotTimeTicket == null){
this.dotTimeTicket = setInterval(function(){
leftContext.clearRect(0,0,280,80);
for(var i = 0; i < 14; i++){
for(let j = 0; j < 55; j++){
let random = Math.ceil(Math.random() * 10);
if(random > 5){
leftContext.beginPath();
leftContext.arc(( 5*(j+1)),( 5*(i+1) ),2,0,2*Math.PI);
leftContext.fillStyle="rgba(0,192,255,0.65)";
leftContext.fill();
leftContext.closePath();
}
}
}
rightContext.clearRect(0,0,280,30);
for(var i = 0; i < 6; i++){
for(let j = 0; j < 55; j++){
let random = Math.ceil(Math.random() * 10);
if(random > 5){
rightContext.beginPath();
rightContext.arc(( 5*(j+1)),( 5*(i+1) ),2,0,2*Math.PI);
rightContext.fillStyle="rgba(0,192,255,0.65)";
rightContext.fill();
rightContext.closePath();
}
}
}
},300);
}
}
原文地址:https://www.cnblogs.com/fmixue/p/8510895.html