HTML5 用canvas制作时钟的方法

最新推荐文章于 2022-02-09 18:04:31 发布

flyingpig2016

最新推荐文章于 2022-02-09 18:04:31 发布

阅读量1.4k

点赞数 2

分类专栏： javascript js插件 HTML5 My-World 文章标签： canvas 时钟

本文链接：https://blog.csdn.net/flyingpig2016/article/details/53995859

版权

javascript 同时被 3 个专栏收录

49 篇文章

订阅专栏

HTML5

6 篇文章

订阅专栏

js插件

5 篇文章

订阅专栏

本文介绍如何使用HTML5的Canvas API来创建一个具有橙色表盘和动态指针的时钟。主要内容包括绘制圆形表盘、添加刻度及数字、实现时针、分针和秒针的动态更新，并通过变换方法和定时器实现平滑转动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用canvas制作漂亮的时钟

需求如下：

这里写图片描述

一：分析项目？

分析时钟的组成；
分析需要的canvas技术；
代码实现；
美化效果。

二：时钟组成？

表盘(橙色)
刻度(黑色)
时针(黑色)
分针(黑色)
秒针(橙色)
表盘中心样式(中心径向渐变)
秒针头部样式(圆圈嵌套)

三：分析需要的canvas技术？

基础知识需要自己看，此项目需要必须理解并且掌握的东西有：

画表盘：绘制圆的路径技术，cxt.arc(6个参数)；
绘制文本：即表盘上面的数字，会使用cxt.font、cxt.textAlign、cxt.textBaseline和cxt.fillTExt等绘制文本属性；
变换方法：rotate();
重新规定原点的方法：translate(x,y)
保存上文环境和输出上文环境方法的方法：save()和restore(),这两个方法一定要理解
代码如下所示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>clock</title>
        <style media="screen">
            #clock{background: #636051;}
        </style>
    </head>
    <body>
        <canvas id="clock" width="500" height="500">
            您的浏览器不支持canvas
        </canvas>
    </body>
    <script type="text/javascript">
        var clock = document.getElementById('clock');
        var cxt = clock.getContext('2d');
        function drawClock(){
            var now = new Date();
            var hours = now.getHours();
            var minute = now.getMinutes();
            var sec = now.getSeconds();
            //转换24小时进制转换为12小时进制
            hours = hours>12 ? hours-12 : hours;
            //画图之前先清除画布
            cxt.clearRect(0,0,500,500)
            //设置原点
            cxt.translate(250,250);
            //表盘(蓝色)
            cxt.lineWidth = 20;
            cxt.strokeStyle = "#D78203";
            cxt.fillStyle = "#EDEAE3";
            cxt.beginPath();
            cxt.arc(0,0,200,0,2*Math.PI,false);
            cxt.stroke();
            cxt.fill();
            cxt.closePath();
            //刻度样式
            var hour = [12,1,2,3,4,5,6,7,8,9,10,11];
            for(var i=0; i<60; i++){
                if(i%5 == 0){
                    cxt.save();
                    //填入小时的字体
                    var x = 160 * Math.cos((i/5*30-90)*Math.PI/180);
                    var y = 160 * Math.sin((i/5*30-90)*Math.PI/180);
                    cxt.font = "bold 18px Arial";
                    cxt.fillStyle = "#000";
                    cxt.textAlign = "center";
                    cxt.textBaseline = "middle";
                    cxt.fillText(hour[i/5],x,y);
                    //小时的刻度标识
                    cxt.lineWidth = 8;
                    cxt.strokeStyle = "#000";
                    cxt.rotate(i*30*Math.PI/180);
                    cxt.beginPath();
                    cxt.moveTo(0,-170);
                    cxt.lineTo(0,-190);
                    cxt.closePath();
                    cxt.stroke();
                    cxt.restore();
                }else{
                    cxt.save();
                    cxt.lineWidth = 5;
                    cxt.strokeStyle = "#000";
                    cxt.rotate(i*6*Math.PI/180);
                    cxt.beginPath();
                    cxt.moveTo(0,-180);
                    cxt.lineTo(0,-190);
                    cxt.stroke();
                    cxt.closePath();
                    cxt.restore();
                }
            }
            //时针样式
            cxt.save();
            cxt.lineWidth = 10;
            cxt.strokeStyle = "#000";
            cxt.rotate((hours + minute/60) * 30 * Math.PI/180);
            cxt.beginPath();
            cxt.moveTo(0,15);
            cxt.lineTo(0,-80);
            cxt.stroke();
            cxt.closePath();
            cxt.restore();
            //分针
            cxt.save();
            cxt.lineWidth = 7;
            cxt.strokeStyle = "#000";
            cxt.rotate((minute + sec/60)*6*Math.PI/180);
            cxt.beginPath();
            cxt.moveTo(0,20);
            cxt.lineTo(0,-130);
            cxt.closePath();
            cxt.stroke();
            cxt.restore();
            //秒针
            cxt.save();
            cxt.lineWidth = 5;
            cxt.strokeStyle = "#D78203";
            cxt.rotate(sec*6*Math.PI/180);
            cxt.beginPath();
            cxt.moveTo(0,25);
            cxt.lineTo(0,-160);
            cxt.closePath();
            cxt.stroke();
            cxt.restore();
            //中心的圆圈
            cxt.beginPath();
            var gradient = cxt.createRadialGradient(0,0,1,0,0,6);
            gradient.addColorStop(0,"#fff");
            gradient.addColorStop(1,"#615942");
            cxt.fillStyle = gradient;
            cxt.arc(0,0,7,0,2*Math.PI,false);
            cxt.fill();
            cxt.closePath();
            //边缘中心的圆圈
            cxt.save();
            cxt.fillStyle = "#D78203";
            cxt.rotate(sec*6*Math.PI/180);
            cxt.beginPath();
            cxt.arc(0,-125,8,0,2*Math.PI,false);
            cxt.fill();
            cxt.closePath();
            cxt.restore();
            //镂空秒针头部的圆圈
            cxt.save();
            cxt.fillStyle = "#fff";
            cxt.rotate(sec*6*Math.PI/180);
            cxt.beginPath();
            cxt.arc(0,-125,4,0,2*Math.PI,false);
            cxt.fill();
            cxt.closePath();
            cxt.restore();

            //还原原点
            cxt.translate(-250,-250);
        }
        setInterval(drawClock,1000);
    </script>
</html>