用canvas绘制时钟

时间：2023-12-05 12:20:02

用canvas做时钟其实很简单，下面是我做出的效果：

用canvas绘制时钟

是不是还挺漂亮的？

下面上代码：

html

<div class="whole">

    <canvas id="canvas" width="450" height="450"></canvas>

    <canvas id="canvas1" width="300" height="300"></canvas>

</div>

这里我用了两个canvas，第一个是用来显示刻度和数字的大圆，第二个是用来显示指针的小圆，因为指针的位置一秒要改变一次，如果用一个canvas，使用clearRect()时就要先清除所有元素再重新画一遍，用两个canvas只要清除指针就可以了

css

*{

            margin:;

            padding:;

        }

        .whole{

            width: 450px;

            height: 450px;

            position: relative;

        }

        #canvas{

            background: cornflowerblue;

            border-radius: 50px;

        }

        #canvas1{

            background: transparent;

            border-radius: 150px;

            position: absolute;

            left: 75px;

            top: 75px;

            z-index:;

        }

设置了一些样式，让钟表更好看

js

let canvas=document.getElementById('canvas');

let context=canvas.getContext('2d');

//绘制时钟轮廓

context.beginPath();

context.lineWidth=5;

context.arc(225,225,220,0,Math.PI*2);

context.fillStyle="#FFFFFF";

context.fill();

context.stroke();

//分刻度

context.beginPath();

context.lineWidth=2;

for(let i=0;i<60;i++){

    context.save();

    context.translate(225,225);

    context.rotate(i*6*Math.PI/180);

    context.moveTo(0,-210);

    context.lineTo(0,-220);

    context.restore();

}

context.closePath();

context.stroke();

//时刻度

context.beginPath();

context.lineWidth=5;

for(let i=0;i<12;i++){

    context.save();

    context.translate(225,225);

    context.rotate(i*30*Math.PI/180);

    context.moveTo(0,-200);

    context.lineTo(0,-220);

    context.restore();

}

context.closePath();

context.stroke();

//数字

let num=['12','1','2','3','4','5','6','7','8','9','10','11'];

context.beginPath();

context.lineWidth=2;

for(let i=0;i<12;i++){

    context.font="40px Microsoft Yahei";

    if(i===0){

        context.strokeText(num[i],203+180*Math.sin(Math.PI/6*i),240-180*Math.cos(Math.PI/6*i));

    }else{

        context.strokeText(num[i],213+180*Math.sin(Math.PI/6*i),240-180*Math.cos(Math.PI/6*i));

    }

}

context.stroke();

//绘制第二个canvas

let canvas1=document.getElementById('canvas1');

let context1=canvas1.getContext('2d');

//指针中心

context1.lineWidth=5;

context1.beginPath();

context1.arc(150,150,10,0,Math.PI*2);

context1.fillStyle="cornflowerblue";

context1.fill();

context1.stroke();

function fun(){

    let time=new Date();

    let minutes=time.getMinutes();

    let hours=time.getHours();

    let second=time.getSeconds();

    let min=minutes*60+second;

    let hou=hours*60*60+min;

    context1.clearRect(0,0,300,300);

    //时针

    context1.save();

    context1.lineWidth=6;

    context1.strokeStyle="#0FFF0F";

    context1.borderRadius=5;

    context1.beginPath();

    context1.translate(150,150);

    context1.rotate(hou*1/120*Math.PI/180);

    context1.moveTo(0,-100);

    context1.lineTo(0,0);

    context1.closePath();

    context1.stroke();

    context1.restore();

    //分针

    context1.save();

    context1.lineWidth=4;

    context1.strokeStyle="#777777";

    context1.beginPath();

    context1.translate(150,150);

    context1.rotate(min*1/10*Math.PI/180);

    context1.moveTo(0,-300);

    context1.lineTo(0,0);

    context1.closePath();

    context1.stroke();

    context1.restore();

    //秒针

    context1.save();

    context1.lineWidth=2;

    context1.beginPath();

    context1.translate(150,150);

    context1.rotate(second*6*Math.PI/180);

    context1.moveTo(0,-300);

    context1.lineTo(0,30);

    context1.closePath();

    context1.stroke();

    context1.restore();

    //指针中心

    context1.lineWidth=5;

    context1.beginPath();

    context1.arc(150,150,10,0,Math.PI*2);

    context1.fillStyle="cornflowerblue";

    context1.fill();

    context1.stroke();

}

let timer=setInterval(fun,1000);

用canvas作图最重要的就是考虑好层次关系，先画什么，在画什么，先画以白色作为填充的圆，再画刻度，再画数字，再画第二个canvas，先画时针，再画分针，再画秒针，再画中心的小圆，这要层次感就很清晰，否则秒针动着动着就被分针遮住了，就不好看了。

除了画之外最重要的就是时间了，要使钟表随时间动起来需要定时器，每秒运行一次fun函数

时针，分针，秒针每秒都要动，但是各自转动的角度都不同

    //时针

    context1.save();

    context1.lineWidth=6;

    context1.strokeStyle="#0FFF0F";

    context1.borderRadius=5;

    context1.beginPath();

    context1.translate(150,150);

    context1.rotate(hou*1/120*Math.PI/180);

    context1.moveTo(0,-100);

    context1.lineTo(0,0);

    context1.closePath();

    context1.stroke();

    context1.restore();

    //分针

    context1.save();

    context1.lineWidth=4;

    context1.strokeStyle="#777777";

    context1.beginPath();

    context1.translate(150,150);

    context1.rotate(min*1/10*Math.PI/180);

    context1.moveTo(0,-300);

    context1.lineTo(0,0);

    context1.closePath();

    context1.stroke();

    context1.restore();

    //秒针

    context1.save();

    context1.lineWidth=2;

    context1.beginPath();

    context1.translate(150,150);

    context1.rotate(second*6*Math.PI/180);

    context1.moveTo(0,-300);

    context1.lineTo(0,30);

    context1.closePath();

    context1.stroke();

    context1.restore();

用translate方法设置转动的中心，用rotate方法设置转动角度，用save和restore方法保存和恢复原来的canvas形态

这样就完成了一个时钟的制作

相关文章