码迷,mamicode.com
首页 > 其他好文 > 详细

canvas 绘画随机点

时间:2018-03-05 20:46:15      阅读:501      评论:0      收藏:0      [点我收藏+]

标签:div   var   image   time   random   awr   native   mat   span   

直接看图吧;

技术分享图片

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

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);
}
}

canvas 绘画随机点

标签:div   var   image   time   random   awr   native   mat   span   

原文地址:https://www.cnblogs.com/fmixue/p/8510895.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!