手绘时钟的设计与实现

最新推荐文章于 2023-04-07 11:00:00 发布

YQEMMMM

最新推荐文章于 2023-04-07 11:00:00 发布

阅读量2.8k

点赞数 1

分类专栏： HTML专栏文章标签： canvas js css html

本文链接：https://blog.csdn.net/YQEMMMM/article/details/109232575

版权

HTML专栏专栏收录该内容

15 篇文章 8 订阅

订阅专栏

手绘时钟的设计与实现

功能要求：不依赖于任何图片素材，完全基于HTML5画布API绘制时钟，并实现每秒更新的动态效果。

实现效果图：

一、界面设计

1.画布的创建
1）使用<canvas>标签
2）属性：style=“border:1px solid”

2. 绘制时钟刻度
自定义drawClock()
1）设置画笔样式和位置
2）画12小时的刻度（使用for循环12次）
   rotate():旋转
   moveTo()和lineTo()：移动和画线段
   stroke()：描边路径

3）画60分钟对应的刻度（使用for循环60次）
   rotate():旋转
   moveTo()和lineTo()：移动和画线段
   stroke()：描边路径

3. 绘制时钟指针
1）获取当前时间:
   var now = new Date();
   getSeconds()
   getMinutes()
   getHours()
   换算成12小时制（例如23点换算为11点）

2）绘制时针:
   时针的角度 = 360/12 x小时 + 360/12/60 x分钟+ 360/12/60/60 x 秒
   换算成弧度：
   时针的弧度 = π/6 x小时+π/360 x分钟+ π/21600 x秒

3）绘制分针:
   分针的角度 = 360/60 x分钟+ 360/60/60 x 秒
   换算成弧度：
   分针的弧度 = π/30 x分钟+ π/1800 x秒

4）绘制秒针:
   分针的角度 = 360/60 x 秒
   换算成弧度：
   分针的弧度 = π/30 x秒

4. 绘制时钟表盘
1）设置样式
2）绘制表盘：arc()
3）描边路径：stroke()
4）恢复初始状态：restore()

二、实时更新效果

1. 每秒刷新一次画面

setInterval("drawClock()", 1000);

注意：此时会变成错误的重叠效果
解决方案：每次刷新前需要清空画布

2. 清空画布
ctx.clearRect(0, 0, 300, 300);

3. 动态效果

三、部分代码

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>手绘时钟</title>
    </head>
    <body onload="drawClock()">
        <h3>手绘时钟</h3>
        <hr />
        <canvas id="clockCanvas" width="300" height="300" style="border:1px solid">
            对不起，您的浏览器不支持HTML5画布API。
        </canvas>
        <script>
            //根据id找到指定的画布
            var c = document.getElementById("clockCanvas");
            //创建2D的context对象
            var ctx = c.getContext("2d");
            //绘制时钟
            function drawClock() {
                //保存画布初始绘制状态
                ctx.save();
                //清空画布
                ctx.clearRect(0, 0, 300, 300);

               
                /*（8）绘制表盘*/
                //设置样式
                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>

备注：完整代码请下载附件

https://download.csdn.net/download/YQEMMMM/13016487

YQEMMMM

关注

1
点赞
踩
19

收藏

觉得还不错? 一键收藏
2
评论
手绘时钟的设计与实现

手绘时钟的设计与实现功能要求：不依赖于任何图片素材，完全基于HTML5画布API绘制时钟，并实现每秒更新的动态效果。实现效果图：一、界面设计1.画布的创建1）使用<canvas>标签2）属性：style=“border:1px solid”2. 绘制时钟刻度自定义drawClock()1）设置画笔样式和位置2）画12小时的刻度（使用for循环12次） rotate():旋转 moveTo()和lineTo()：移动和画线段 str...
复制链接

扫一扫