结合js利用画布制作一个时钟

最新推荐文章于 2021-07-11 20:42:03 发布

转载最新推荐文章于 2021-07-11 20:42:03 发布 · 155 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xuhanghang/p/10110536.html

本文详细介绍如何使用HTML5 Canvas绘制一个动态显示当前时间的手绘时钟，包括绘制表盘、时间刻度及时针、分针、秒针的全过程。

首先搭建canvas画布格式：

动态获取画布的宽和高方便变换，利用translate将圆中心坐标改为0 0；

<canvas width="800px" height="800px"></canvas>
        <script>
            
            var canvas=document.querySelector("canvas");
            var ctx=canvas.getContext("2d");
            var width=ctx.canvas.width;
            var height=ctx.canvas.height;
            var r=width/2
            ctx.translate(r,r)

第一步绘制表盘：

利用save来保存当前状态 restore返回之前保存过的状态，保证前后不受影响

先用画圆属性arc（）绘制一个圆圈

定义一个数组将时间刻度装起来，用for循环来循环添加到变盘上

首先获取到刻度之间的角度，然后利用三角函数得到刻度的位置，最后利用filltext将文本添加上去

function biao(){
            //边框
                    ctx.save();
                    ctx.beginPath()
                ctx.arc(0,0,r-5,0,2*Math.PI,false)
                ctx.lineWidth=10
                ctx.stroke()
            //时间刻度
            var unm=[3,4,5,6,7,8,9,10,11,12,1,2]
                    ctx.font = "18px Arial";
                ctx.textAlign = "center";
                ctx.textBaseline = "middle"
            for(i=0;i<unm.length;i++){
                var edg=2*Math.PI/12*i
                var x=Math.cos(edg)*(r-50)
                var y=Math.sin(edg)*(r-50)
                ctx.fillText(unm[i],x,y)
            }
            //边刻
            for(j=0;j<60;j++){
                ctx.beginPath()
                var rng=2*Math.PI/60*j
                var x=Math.cos(rng)*(r-30)
                var y=Math.sin(rng)*(r-30)
                if(j%5==0){
                    ctx.fillStyle="black"
                }else{
                    ctx.fillStyle="#ccc"
                }
                ctx.arc(x,y,2,0,2*Math.PI,false)
                ctx.fill()
            }
            ctx.restore() 
            }

第二步绘制时针：

现获取到每小时之间的弧度

时针是需要跟随分针改变的

所以需要加上分针对时针的影响得弧度才能的到时正真转动的弧度

//时针
            function hour(shi,fen){
                ctx.save();
                ctx.beginPath()
                var rad=2*Math.PI/12*shi
                //分对时的影响
                var rad1=2*Math.PI/60*fen
                ctx.rotate(rad+rad1)
                ctx.lineCap="round"; 
                ctx.lineWidth=6
                ctx.moveTo(0,10)
                ctx.lineTo(0,-r/2)
                ctx.stroke()
                ctx.restore() 
            }

第三步绘制分针

//分
            function minute(fen){
                ctx.save(); 
                ctx.beginPath()
                var rad=2*Math.PI/60*fen
                ctx.rotate(rad)
                ctx.lineCap="round"; 
                ctx.lineWidth=4
                ctx.moveTo(0,10)
                ctx.lineTo(0,-r+120)
                ctx.stroke()
                ctx.restore() 
            }

第四步绘制秒针

//秒
            function seccond(miao){
                ctx.save(); 
                ctx.beginPath()
                var rad=2*Math.PI/60*miao
                ctx.rotate(rad) 
                ctx.moveTo(-2,20)
                ctx.lineTo(2,20)
                ctx.lineTo(0,-r+70)
                ctx.lineTo(-2,20)
                ctx.fillStyle="aquamarine"
                ctx.fill()
                ctx.restore() 
            }

第五步调用函数，将时间参数添加进去，利用定时器一秒触发一次

function show(){
                ctx.clearRect(-r,-r,width,height)
                var time=new Date();
                var miao=time.getSeconds();
                var fen=time.getMinutes();
                var shi=time.getHours();
                hour(shi,fen)
                minute(fen)
                seccond(miao)
                biao()
            }
            setInterval(show,1000)

完整代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            canvas{
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <canvas width="800px" height="800px"></canvas>
        <script>
            
            var canvas=document.querySelector("canvas");
            var ctx=canvas.getContext("2d");
            var width=ctx.canvas.width;
            var height=ctx.canvas.height;
            var r=width/2
            ctx.translate(r,r)
            function biao(){
            //边框
                ctx.save();
                ctx.beginPath()
                ctx.arc(0,0,r-5,0,2*Math.PI,false)
                ctx.lineWidth=10
                ctx.stroke()
            //时间刻度
            var unm=[3,4,5,6,7,8,9,10,11,12,1,2]
                ctx.font = "18px Arial";
                ctx.textAlign = "center";
                ctx.textBaseline = "middle"
            for(i=0;i<unm.length;i++){
                var edg=2*Math.PI/12*i
                var x=Math.cos(edg)*(r-50)
                var y=Math.sin(edg)*(r-50)
                ctx.fillText(unm[i],x,y)
            }
            //边刻
            for(j=0;j<60;j++){
                ctx.beginPath()
                var rng=2*Math.PI/60*j
                var x=Math.cos(rng)*(r-30)
                var y=Math.sin(rng)*(r-30)
                if(j%5==0){
                    ctx.fillStyle="black"
                }else{
                    ctx.fillStyle="#ccc"
                }
                ctx.arc(x,y,2,0,2*Math.PI,false)
                ctx.fill()
            }
            ctx.restore() 
            }
            
            //时针
            function hour(shi,fen){
                ctx.save();
                ctx.beginPath()
                var rad=2*Math.PI/12*shi
                //分对时的影响
                var rad1=2*Math.PI/60*fen
                ctx.rotate(rad+rad1)
                ctx.lineCap="round"; 
                ctx.lineWidth=6
                ctx.moveTo(0,10)
                ctx.lineTo(0,-r/2)
                ctx.stroke()
                ctx.restore() 
            }
            //分
            function minute(fen){
                ctx.save(); 
                ctx.beginPath()
                var rad=2*Math.PI/60*fen
                ctx.rotate(rad)
                ctx.lineCap="round"; 
                ctx.lineWidth=4
                ctx.moveTo(0,10)
                ctx.lineTo(0,-r+120)
                ctx.stroke()
                ctx.restore() 
            }
            //秒
            function seccond(miao){
                ctx.save(); 
                ctx.beginPath()
                var rad=2*Math.PI/60*miao
                ctx.rotate(rad) 
                ctx.moveTo(-2,20)
                ctx.lineTo(2,20)
                ctx.lineTo(0,-r+70)
                ctx.lineTo(-2,20)
                ctx.fillStyle="aquamarine"
                ctx.fill()
                ctx.restore() 
            }
            function show(){
                ctx.clearRect(-r,-r,width,height)
                var time=new Date();
                var miao=time.getSeconds();
                var fen=time.getMinutes();
                var shi=time.getHours();
                hour(shi,fen)
                minute(fen)
                seccond(miao)
                biao()
            }
            setInterval(show,1000)

效果图

转载于:https://www.cnblogs.com/xuhanghang/p/10110536.html