canvas钟表实例

最新推荐文章于 2022-03-09 09:42:31 发布

雲胡不喜

最新推荐文章于 2022-03-09 09:42:31 发布

阅读量165

点赞数

本文链接：https://blog.csdn.net/qq_40596594/article/details/89854093

版权

本文通过HTML5的Canvas元素，详细讲解如何创建一个动态更新的时间显示钟表实例，包括绘制时钟背景、指针、时间计算等关键步骤，帮助读者掌握Canvas在图形绘制中的应用。

摘要由CSDN通过智能技术生成

制作要求

	表盘
1.初始化
	将圆心调整到画布的中间
	由于canvas中画圆与旋转所参照的坐标系于正常坐标系有出入
		将整个画布逆时针旋转90度
	初始化一些样式数据
		ctx.lineWidth = 8;
	  	ctx.strokeStyle = "black";
	  	ctx.lineCap = "round";
	  	2.外层空心圆盘
	圆盘颜色:#325FA2
	圆盘宽度:14
	圆盘半径:140
	
3.时针刻度
	长度为20
	宽度为8
	外层空心圆盘与时针刻度之间的距离也为20

4.分针刻度
	宽度为4
	长度为3

5.时针
	宽度为14
	圆心外溢出80 收20

6.分针
	宽度为10
	圆心外溢出112 收28

7.秒针
	颜色:D40000
	宽度为6
	圆心外溢出83 收30

	---->中心实心圆盘
		半径为10
	---->秒针头
		96码开外半径为10的空心圆
		宽度为6

效果图：
在这里插入图片描述

代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>钟表</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;

        }
        html,body{
            height: 100%;
            background-color: pink;
          overflow: hidden;
        }
        #clock{
            background: gray;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate3d(-50%,-50%,0);
        }
    </style>
</head>
<body>
    <canvas id="clock" width="400" height="400"  >
    </canvas>

    <script type="text/javascript">
        window.onload=function() {

            var clock = document.querySelector("#clock");
            if (clock.getContext) {
                var ctx = clock.getContext("2d");
                setInterval(function () {
                    ctx.clearRect(0, 0, clock.width, clock.height);
                    move();
                }, 1000);

                move();

                function move() {
                    ctx.save();
                    ctx.lineWidth = 8;
                    ctx.strokeStyle = "black";
                    ctx.lineCap = "round";
                    ctx.translate(200, 200);
                    ctx.rotate(-90 * Math.PI / 180);
                    ctx.beginPath();

                    //外层空心圆盘
                    ctx.save();
                    ctx.strokeStyle = "#325FA2";
                    ctx.lineWidth = 14;
                    ctx.beginPath();
                    ctx.arc(0, 0, 140, 0, 360 * Math.PI / 180);
                    ctx.stroke();
                    ctx.restore();

                    //时针刻度
                    ctx.save();
                    for (var i = 0; i < 12; i++) {
                        ctx.beginPath();
                        ctx.rotate(30 * Math.PI / 180);
                        ctx.moveTo(0, 100);
                        ctx.lineTo(0, 120);
                        ctx.stroke();
                    }
                    ctx.restore();

                    //分针刻度
                    ctx.save();
                    ctx.lineWidth = 4;
                    for (var i = 0; i < 60; i++) {
                        if (i % 5 != 0) {
                            ctx.beginPath();
                            ctx.moveTo(0, 117);
                            ctx.lineTo(0, 120);
                            ctx.stroke();
                        }
                        ctx.rotate(6 * Math.PI / 180);
                    }
                    ctx.restore();

                    //时针 分针 秒针 表座
                    var date = new Date();
                    var s = date.getSeconds();
                    var m = date.getMinutes()+s/60;
                    var h = date.getHours()+m/60;
                    h = h>12?h-12:h;

                    //时针
                    ctx.save()
                    ctx.lineWidth = 14;
                    ctx.rotate(h*30*Math.PI/180)
                    ctx.beginPath()
                    ctx.moveTo(0, -20);
                    ctx.lineTo(0, 80);
                    ctx.stroke();
                    ctx.restore()
                    //分针
                    ctx.save()
                    ctx.lineWidth = 10;
                    ctx.rotate(m*6*Math.PI/180)
                    ctx.beginPath()
                    ctx.moveTo(-112, 0);
                    ctx.lineTo(28, 0);
                    ctx.stroke();
                    ctx.restore()

                    //秒针 颜色:D40000
                    //     宽度为6
                    //     圆心外溢出83 收30
                    //
                    //     ---->中心实心圆盘
                    //     半径为10
                    //     ---->秒针头
                    //     96码开外半径为10的空心圆
                    //     宽度为6
                    ctx.save()
                    ctx.lineWidth = 6;
                    ctx.strokeStyle = "#D40000";
                    ctx.fillStyle = "#D40000";
                    ctx.rotate(s*6*Math.PI/180)
                    ctx.beginPath();
                    ctx.moveTo(-30, 0);
                    ctx.lineTo(83, 0);
                    ctx.stroke();


                    ctx.beginPath();
                    ctx.arc(0, 0, 10, 0, 360 * Math.PI / 180);
                    ctx.fill();

                    ctx.beginPath();
                    ctx.arc(96, 0, 10, 0, 360 * Math.PI / 180);
                    ctx.stroke();
                    ctx.restore();


                    ctx.restore();
                }

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

雲胡不喜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas钟表实例

制作要求表盘1.初始化将圆心调整到画布的中间由于canvas中画圆与旋转所参照的坐标系于正常坐标系有出入将整个画布逆时针旋转90度初始化一些样式数据 ctx.lineWidth = 8; ctx.strokeStyle = "black"; ctx.lineCap = "round"; 2.外层空心圆盘圆盘颜色:#325FA2 圆盘宽度:1...
复制链接

扫一扫