全国服务热线:4008-888-888

技术知识

Html5 canvas完成颗粒数字时钟的示例编码

大家先看看颗粒数字时钟的实际效果,以下:

下面大家将根据canvas和js完成,

最先要建立1个html文档并加上1个canvas画布,以下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>Document</title>
    <style>
        .container{
            margin: 0, auto;
            width: 600px;
            
        }
    </style>
</head>
<body>
    <div id="container">
        <canvas id="canvas"></canvas>
    </div>
</body>

下面导入素材,digit.js,素材中根据2维数字能量数组拼成1个个数据,共有:0⑼和冒号,10个标识符,以下:

能够看到为1的标识符构成了

下面刚开始建立画布:

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

上面的编码便可以在访问器画1个小灰色画布了

下面大家刚开始剖析:

1.掌握数据信息引流矩阵?便是多维度数字能量数组

2.怎样画圆?

2.1要圣人道半径?

由上图获知,圆心的部位先后为:

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

另外,还可以根据测算圆的高宽比,获得半径,以下:

1个圆的高宽比是(r+1)*2,画布高宽比是由10个圆构成

canvasHeight = (r+1)*2*10

若将画布高宽比设为100,则r就出来了,圆心xy也出来了,刚开始画圆了
先要在上面的Clock目标中加1条句子,测算r

this.r = 100/20⑴;

下面我在Clock的原形上再加draw方式

Clock.prototype.draw = function(num, index) {
        this.cxt.fillStyle="#000";
        for (let i=0; i<digit[num].length; i++) {
            for (let j=0; j<digit[num][i].length; j++) {
                if (digit[num][i][j] == 1) {
                    this.cxt.beginPath();
                    this.cxt.arc(index*70+(this.r+1)+(this.r+1)*2*j, (this.r+1)+(this.r+1)*2*i, this.r, 0, Math.PI*2, false);
                    this.cxt.closePath();
                    this.cxt.fill();
                }
            }
        }
    }

draw接受2个主要参数,第1个是标识符数据库索引,第2个是标识符偏位次序,70便是1个偏位间距,能够自定。
第1个for,拿到要3D渲染的标识符数字能量数组,第2个for,取每行驶行3D渲染且只3D渲染为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了

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服