Html5 canvas实现粒子时钟的示例代码

2020-04-24 19:18:07易采站长站整理

this.cxt.fill();
}
}
}
}

draw接收2个参数,第一个是字符索引,第二个是字符偏移顺序,70就是一个偏移距离,可以自定。
第一个for,拿到要渲染的字符数组,第二个for,取每一行进行渲染且只渲染为1的,画圆的参数主要是x,y,r

下面就要得到时间,我们可以直接从new Date中用正则取时间,如下:


Clock.prototype.getTime = function() {
var reg = /(d)(d):(d)(d):(d)(d)/.exec(new Date());
var data = [];
data.push(reg[1], reg[2], 10, reg[3], reg[4], 10, reg[5], reg[6]);
for (var i=0; i<data.length; i++) {
this.draw(data[i], i);
}
}

通过正则可以方便的取到时分秒,在push数组时注意格式对应,其中10表示digit.js中的第10位字符,即冒号
注意 这样画会有问题,即画布不能刷新,可以加上这个


canvas.height= 100

下面可以运行代码了,如下:


var clock = new Clock();
setInterval(()=>{
clock.getTime();
})

好了,这样就ok了