利用画布canvas实现钟表动态效果

最新推荐文章于 2022-11-29 20:00:00 发布

玲玲酱

最新推荐文章于 2022-11-29 20:00:00 发布

阅读量950

点赞数

分类专栏： jQuery 文章标签：前端 html5 css3 javascript jquery

本文链接：https://blog.youkuaiyun.com/qq_45758587/article/details/109428596

版权

jQuery 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用HTML5的Canvas API结合JavaScript和CSS3，创建一个实时更新的动态钟表效果。通过Canvas绘制时针、分针和秒针，并实现转动动画，详细讲解了各个部分的实现细节和技术要点。

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

在这里插入图片描述

利用画布实现钟表动态效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        window.onload=function(){
           
          function clock(){
            var canvas=document.getElementById("canvas");
           var cx=canvas.getContext("2d");
           //表盘
           cx.fillStyle='green';
           cx.beginPath();
           cx.arc(250,250,200,0,Math.PI*2);
           cx.closePath();
           cx.fill();
               //时刻度
               cx.strokeStyle="black";
           cx.lineWidth=2;
           for(var i=0;i<12;i++){
               cx.save();
               cx.translate(250,250);//移动圆心位置
               cx.rotate(i*Math.PI/6);
               cx.beginPath();
               cx.moveTo(0,-180);
               cx.lineTo(0,-200);
               cx.closePath();
               cx.stroke();

               //数字
               cx.restore();
               cx.font='16px blod';
               cx.fillStyle="black";
               cx.save();
               cx.translate(250,250);
               cx.rotate(i*Math.PI/6);
               cx.rotate(Math.PI/6);
               cx.fillText(i+1,-5,-220);
               cx.restore();
           }
           //分刻度
           cx.strokeStyle="black";
           for(var i=0;i<60;i++){
               cx.save();
               cx.translate(250,250);//移动圆心位置
               cx.rotate(i*Math.PI/30);
               cx.beginPath();
               cx.moveTo(0,-190);
               cx.lineTo(0,-200);
               cx.closePath();
               cx.stroke();
               cx.restore();
           }
            //绘制时针
            cx.strokeStyle="black";
            var today=new Date();
            var hour=today.getHours();
            var min=today.getMinutes();
            var sec=today.getSeconds();
            hour=hour+min/60;
            cx.lineWidth=5;
            cx.save();
            cx.translate(250,250);
            cx.rotate(hour*(Math.PI/6));
            cx.beginPath();
            cx.moveTo(0,5);
            cx.lineTo(0,-110);
            cx.closePath();
            cx.stroke();
            cx.restore();
           //绘制分针
           cx.strokeStyle="black";
            cx.lineWidth=3;
            cx.save();
            cx.translate(250,250);
            cx.rotate(min*(Math.PI/30));
            cx.beginPath();
            cx.moveTo(0,8);
            cx.lineTo(0,-150);
            cx.closePath();
            cx.stroke();
            cx.restore();
           //绘制秒针
            cx.lineWidth=1;
            cx.strokeStyle="red";
            cx.save();
            cx.translate(250,250);
            cx.rotate(sec*(Math.PI/30));
            cx.beginPath();
            cx.moveTo(0,10);
            cx.lineTo(0,-170);
            cx.closePath();
            cx.stroke();
            cx.restore();
            //绘制交界处
            cx.save();
            cx.fillStyle="#ccc";
            cx.strokeStyle="red";
            cx.translate(250,250);
            cx.beginPath();
            cx.arc(0,0,5,0,Math.PI*2);
            cx.closePath();
            cx.fill();
            cx.stroke();
            cx.restore();
             setTimeout(clock,1000);
          }
          clock();
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="600px" height="600px" style="background-color: #ccc;"></canvas>
</body>
</html>