h5 canvas实现粒子时钟的详细方法

nbsp;html&gt;    <meta>    <title>Document</title>    <style>        .container{            margin: 0, auto;            width: 600px;        }    </style>    <p>        <canvas></canvas>    </p>

function Clock() {        var canvas = document.getElementById("canvas");        canvas.width = 600;        canvas.height = 100;        this.cxt = canvas.getContext('2d');        this.cxt.fillStyle="#ddd";        this.cxt.fillRect(0, 0, 500, 100);    }

r+1r+1 + (r+1)*2*1r+1 + (r+1)*2*2。。。r+1 + (r+1)*2*i

canvasHeight = (r+1)*2*10

this.r = 100/20-1;

Clock.prototype.draw = function(num, index) {        this.cxt.fillStyle="#000";        for (let i=0; i<digit><p>draw接收2个参数，第一个是字符索引，第二个是字符偏移顺序，70就是一个偏移距离，可以自定。<br>第一个for，拿到要渲染的字符数组，第二个for，取每一行进行渲染且只渲染为1的，画圆的参数主要是x,y,r</p><p>下面就要得到时间，我们可以直接从new Date中用正则取时间，如下：</p><pre class="brush:php;toolbar:false">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><p>通过正则可以方便的取到时分秒，在push数组时注意格式对应，其中10表示digit.js中的第10位字符，即冒号<br>注意 这样画会有问题，即画布不能刷新，可以加上这个</p><pre class="brush:php;toolbar:false">canvas.height= 100

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