用canvas绘制动态时钟

流走的年华 - 2021-09-14 22:36:09

绘制如下图所示一个动态时钟

图片.png

<body><canvas width="600px" height="600px" ></canvas></body>
<script>
    window.onload = function(){
        //获取canvas对象
        var canvas = document.querySelector("canvas");
        //获取上下文
        var context = canvas.getContext("2d");
        //封装一个函数，用来时钟的动态
        function clock(){
            //绘制圆盘
            context.beginPath();//开始
            context.arc(300,300,200,0,2*Math.PI);
            context.fillStyle = "pink";//圆盘的颜色
            context.fill();//绘制圆盘    
            context.closePath();//结束
            
            //绘制时刻度
            for(var i=0; i<12; i++){
                context.save();//保存
                context.lineWidth = 4;//时针的宽度
                context.beginPath();
                context.translate(300,300);//将原点平移到圆心
                context.rotate(i*(Math.PI*6));//360/12=30° 180°/30°=6
                context.moveTo(0,-180);
                context.lineTo(0,-200);
                context.stroke();//绘制线条
                context.fillStyle = "black";//线条的颜色
                //绘制时钟数字
                context.font = "28px bold";//字体大小为28px，加粗
                context.rotate(Math.PI/6);//将字体旋转30°
                context.fillText(i+1,-7,-220);//数字回转-7，并且在圆外显示
                context.closePath();
                context.restore();
                context.restore();//回滚
            }
            //绘制分刻度
            for(i=0; i<60; i++){
                context.save();
                context.translate(300,300);//平移到原点
                context.rotate(i*(Math.PI/30));
                context.beginPath();
                context.moveTo(0,-190);
                context.lineTo(0,-200);
                context.stroke();
                context.closePath();
                context.restore();
            }
            //获取当前时间
            var today = new Date();
            //获取当前小时
            var hour = today.getHours();
            //获取分
            var min = today.getMinutes();
            //获取秒
            var sec = today.getSeconds();
            hour = hour+min/60;
            //绘制时针
            context.save();
            context.lineWidth = 3;
            context.translate(300,300);    
            context.rotate(hour*(Math.PI/6));
            context.beginPath();
            context.moveTo(0,10);
            context.lineTo(0,-80);
            context.stroke();
            context.closePath();
            context.restore();
            //绘制分针
            context.save();
            context.lineWidth = 2;
            context.translate(300,300);
            context.rotate(min*(Math.PI/30));
            context.beginPath();
            context.moveTo(0,10);
            context.lineTo(0,-100);
            context.stroke();
            context.closePath();
            context.restore();
            //绘制秒针
            context.save();
            context.lineWidth=1;
            context.rotate(sec*(Math.PI/30));
            context.strokeStyle = "red";
            context.beginPath();
            context.moveTo(0,10);
            context.lineTo(0,-120);
            context.stroke();
            context.closePath();
            context.restore();
            //交叉处
            context.save();
            context.translate(300,300);        
            context.beginPath();
            context.fillStyle = "#ccc";
            context.strokeStyle = "red";
            context.arc(0,0,5,0,Math.PI*2);
            context.fill();
            context.stroke();
            context.closePath();
            context.restore();
            setTimeout(clock,1000);//超时模拟
            
        }
        clock();
    }
</script>

特别申明：本文内容来源网络，版权归原作者所有，如有侵权请立即与我们联系（cy198701067573@163.com），我们将及时处理。

上一篇：前端面试每日 3+1 —— 第878天

下一篇：【译】Learn D3 入门文档：Animation