HTML（5）canvas手绘时钟的设计与实现

什么都不会…

于 2024-01-10 14:04:03 发布

阅读量915

点赞数 6

分类专栏：前端文章标签： html 前端

本文链接：https://blog.csdn.net/qq_52187093/article/details/135502054

版权

前端专栏收录该内容

8 篇文章 1 订阅

订阅专栏

一、实验项目

5.1 手绘时钟的设计与实现

功能要求：在手绘时钟项目中，主要难点为时钟刻度与时钟的绘制以及时间实时更新的动画效果不依赖于任何图片素材，完全基于HTML5画布API绘制时钟，并实现每秒更新的动态效果。效果图如图所示。

二、实验源代码

<!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>
     </style>
</head>
<body onload="drawClock()">
     <h3>手绘时钟</h3>
     <hr />
     <canvas id="clockcanvas" width="300" height="300" style="border:1px solid">
     </canvas>

     <script type="text/javascript">
          var c=document.getElementById("clockcanvas");
          var ctx=c.getContext('2d')
          // 把clockcanvas赋给c 并用ctx获取该canvas的2D绘图环境
          function drawClock(){
               ctx.save();               
               ctx.clearRect(0,0,300,300);
               // x 要清除的矩形左上角的 x 坐标
               // y 要清除的矩形左上角的 y 坐标
               // width 要清除的矩形的宽度，以像素计
               // height 要清除的矩形的高度，以像素计
               //功能：清除矩形区域，使其完全透明 三种绘制方式的一种 绘制内容 边框 或者 全部清除

               ctx.translate(150,150);
               //设置画布中心为参照点 便于按照原点旋转
               ctx.rotate(-Math.PI/2);
               //画布旋转90度
               ctx.lineCap="round";
                //设置画笔线条的末端为圆形             
               ctx.lineWidth=6;
               //设置画笔线条为6像素

            //画12小时刻度
               for (var i=0;i<12;i++){
               ctx.beginPath();
               //新建一条路径
               ctx.rotate(Math.PI/6);
                //每次顺时针旋转30度
                ctx.moveTo(100,0);
                ctx.lineTo(120,0);
               //描边路径
               ctx.stroke();
               }
               
               // 画60分钟对应的一圈外边缘刻度
              ctx.lineWidth=5;
              for (i=0;i<60;i++){
               ctx.beginPath();
               ctx.moveTo(115,0);
               ctx.lineTo(120,0);
               ctx.rotate(Math.PI/30);
                ctx.stroke();
               }

               //获取当前时间
            var now = new Date();
            var s = now.getSeconds();
            var m = now.getMinutes();
            var h = now.getHours();
            //将小时设置成12小时制的数值
            if (h>12)
            h-=12;

            // 保存当前状态
            ctx.save();

            //设置指针所在角度
            ctx.rotate(h*(Math.PI/6)+(Math.PI/360)*m+(Math.PI/21600)*s);
            //设置时间样式
            ctx.lineWidth=12;
            //设置时针宽度 开始绘制时针
            ctx.beginPath();//创建新路径
            ctx.moveTo(-10,0);
            ctx.lineTo(80,0);
            ctx.stroke();
            
            //恢复当前状态1
            ctx.restore();


            //绘制分针，保存当前状态1
            ctx.save();//保存1
            //旋转角度
            ctx.rotate((Math.PI/30)*m+(Math.PI/1800)*s);
            //设置分针样式
            ctx.lineWidth=8;
            //设置分针路径
            ctx.beginPath();
            ctx.moveTo(-20,0);
            ctx.lineTo(100,0);
            //描边路径
            ctx.stroke();
            //恢复1
            ctx.restore();


            //绘制秒针，保存1
            ctx.save();
            //设置秒针路径
            ctx.rotate(s*Math.PI/30);
            ctx.strokeStyle="red";
            //6像素
            ctx.lineWidth=6;
            ctx.beginPath();
            ctx.moveTo(-30,0);
            ctx.lineTo(120,0);
            ctx.stroke();
            
            //画时钟原点
            ctx.fillStyle="red";
            ctx.beginPath();
            ctx.arc(0,0,10,0,Math.PI*2,true);//绘制圆，以旋转中心为原点，开始位置   半径 弧度  逆时针
            //填充原点为红色
            ctx.fill();
            //恢复之前状态1
            ctx.restore();

             //绘制表盘
            ctx.lineWidth=12;
            ctx.strokeStyle="gray";
            //开始绘制表盘路径
            ctx.beginPath();
            ctx.arc(0,0,140,0,Math.PI*2,true);
            //描边路径
            ctx.stroke();
            // 恢复原有状态
             ctx.restore();



        }
            setInterval("drawClock()",1000);
          
     </script>

</body>
<html>