前端学习记录005_canvas绘制钟表

最新推荐文章于 2023-05-15 22:17:25 发布

Duckdan

最新推荐文章于 2023-05-15 22:17:25 发布

阅读量142

点赞数

分类专栏： # 前端学习记录

本文链接：https://blog.youkuaiyun.com/Duckdan/article/details/114634858

版权

前端学习记录专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何使用HTML5的Canvas元素绘制一个实时更新的动态时钟。通过JavaScript控制，实现秒针、分针及小时针的精确转动，并展示了完整的源代码。

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

一、效果图

二、源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时钟</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        html,body{
            height: 100%;
            overflow: hidden;
            background-color: #bbffaa;
        }

        #canvas{
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            background-color: pink;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <script>
        window.onload=function(){
            var canvas = document.getElementById("canvas");
            if(canvas.getContext){
                var ctx = canvas.getContext("2d");
            }

         
            move();
            setInterval(move,1000);

            function move(){
                    //每次都清除画布
                    ctx.clearRect(0,0,canvas.width,canvas.height);
                    //添加外层save()和restore()方法，是为了处理最初的旋转以及平移
                    ctx.save();
                    ctx.lineCap="round";
                    ctx.lineWidth=8;
                    //将圆点移动到中心位置
                    ctx.translate(200,200);
                    //逆时针旋转90度坐标系
                    ctx.rotate(-90*Math.PI/180);

                    //绘制外圆表盘
                    ctx.save();
                    ctx.strokeStyle="#325fa2";
                    ctx.lineWidth=14;
                    //开始绘制路径
                    ctx.beginPath();
                    ctx.arc(0,0,140,0,2*Math.PI);
                    ctx.stroke();
                    ctx.restore();

                    ctx.save();  
                    ctx.lineWidth=8;
                    //绘制刻度
                    //绘制时针刻度
                    for(var i=0; i< 12; i++){
                        //rotate有叠加的作用，顺时针旋转
                        ctx.rotate(30*Math.PI/180);
                        //每次都清除上一次的路径容器
                        ctx.beginPath();
                        ctx.moveTo(100,0);
                        ctx.lineTo(120,0);
                        ctx.stroke();   
                    }
                    ctx.restore();    
        
                    //绘制分针刻度
                    ctx.save();
                    ctx.lineWidth=4;
                    for(var i=0;i<60;i++){
                        //i=0时绘制，但是坐标系被旋转6度；i=1时绘制，此时坐标系已经旋转了6度，时针刻度的地方将不会被绘制
                        if(i%5!=0){
                            ctx.beginPath();
                            ctx.moveTo(117,0);
                            ctx.lineTo(120,0);
                            ctx.stroke();
                        }
                        ctx.rotate(6*Math.PI/180);
                     }
                    ctx.restore();


                        var date = new Date();
                        var sec = date.getSeconds();
                        var min = date.getMinutes() + sec / 60;
                        var hour = date.getHours() + min / 60;
                        hour = hour > 12 ? hour-12 : hour;

                        //绘制时针
                        ctx.save();
                        ctx.lineWidth=14;
                        ctx.rotate(hour*30*Math.PI/180);
                        ctx.beginPath();
                        ctx.moveTo(-20,0);
                        ctx.lineTo(80,0);
                        ctx.stroke();
                        ctx.restore();

                        //绘制分针
                        ctx.save();
                        ctx.lineWidth=10;
                        ctx.rotate(min*6*Math.PI/180);
                        ctx.beginPath();
                        ctx.moveTo(-28,0);
                        ctx.lineTo(84,0);
                        ctx.stroke();
                        ctx.restore();

                        //绘制秒针
                        ctx.save();
                        ctx.lineWidth=6;
                        ctx.strokeStyle="#D40000"
                        ctx.rotate(sec*6*Math.PI/180);
                        ctx.beginPath();
                        ctx.moveTo(-30,0);
                        ctx.lineTo(83,0);
                        ctx.stroke();

                        ctx.lineWidth=4;
                        ctx.beginPath();
                        ctx.arc(96,0,10,0,2*Math.PI);
                        ctx.stroke();
                        ctx.restore();

                        
                    //绘制中心圆点
                    ctx.save();
                    ctx.fillStyle="deeppink";
                    ctx.beginPath();
                    ctx.arc(0,0,10,0,2*Math.PI);
                    ctx.fill();
                    ctx.restore();
                ctx.restore();
            }
          

        };
    </script>
</body>
</html>