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

2018/12/12 19:23
阅读数 38

首先 搭建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)

    效果图

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部