使用canvas绘制一个时钟

最新推荐文章于 2024-08-15 17:26:23 发布

sifanchao

最新推荐文章于 2024-08-15 17:26:23 发布

阅读量639

点赞数

文章标签： javascript css3

本文链接：https://blog.csdn.net/sifanchao/article/details/106363336

版权

准备工作，设置基准

设置表钟的表心位置坐标（x,y）和表钟大小（r）。创建canvas，使用getContext() 方法返回canvas对象。

得到时分秒表针每走一步的度数，用来绘制扇形

初始化起始位置
时针因为一共12格，所以每走一步的度数为 30°
分针一共60格，所以一步为 6°
秒针6°
为了修饰，当秒针走了10秒时，分钟多一度；同理分针走了2分钟时，时针多一度。

绘制一个小刻度的扇形

在这里插入图片描述

绘制白色表盘

用白色表盘盖住上一个扇形圆，生成一个带有刻度的新扇形圆
在这里插入图片描述

绘制大刻度

在这里插入图片描述

绘制小白色表盘

在这里插入图片描述

绘制时分秒表针

在这里插入图片描述

定时启动

使用setInterval(drawWatch, 1000)设置一秒启动一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时钟</title>
    <style>
        body {
            background-color: cadetblue;
        }
        #watch {
            background-color: #fff;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="watch" width="600px" height="600px">  
    </canvas>
    <script>
        var canvas = document.querySelector('canvas')
        var ctxWatch = canvas.getContext('2d')
        var x = 300;
        var y = 300;
        var r = 200;

        window.onload = drawWatch
        setInterval(drawWatch, 1000)

        function drawWatch(){
            var oDate = new Date()
            var oHour = oDate.getHours()
            var oMin = oDate.getMinutes()
            var oSec = oDate.getSeconds()

            var oHourScale = (-90 + (360 / 12) * oHour + oMin / 2) * Math.PI / 180
            var oMinScale = (-90 + (360 / 12 / 5) * oMin + oSec / 10) * Math.PI / 180
            var oSecScale = (-90 + (360 / 12 / 5) * oSec) * Math.PI / 180

            // 绘制小刻度
            drawScaleDial(60, 6)

            //绘制白色表盘
            drawWhiteDial(19 / 20 * r)

            // 绘制大刻度
            drawScaleDial(12, 30)

            //绘制小白色表盘
            drawWhiteDial(18 / 20 * r)

            // 时针
            drawHands(5, 10 / 20 * r, oHourScale)
            drawHands(3, 15 / 20 * r, oMinScale)
            drawHands(1, 18 / 20 * r, oSecScale)
        }

        function drawScaleDial(lineNum, degree){
            ctxWatch.beginPath()
            for(var i = 0; i < lineNum; i++){
                // 把路径移动到画布中的指定点，不创建线条
                ctxWatch.moveTo(x, y);
                /* 
                创建弧/曲线（用于创建圆形或部分圆）
                    x	圆的中心的 x 坐标。
                    y	圆的中心的 y 坐标。
                    r	圆的半径。
                    sAngle	起始角，以弧度计（弧的圆形的三点钟位置是 0 度）。
                    eAngle	结束角，以弧度计。
                    counterclockwise	可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
                */
                ctxWatch.arc(x, y, r, i * degree * Math.PI / 180, (i+1) * degree * Math.PI / 180, false);
            }
            ctxWatch.closePath()
            // 绘制已定义的路径
            ctxWatch.stroke()
        }

        function drawWhiteDial(radius){
            ctxWatch.fillStyle = 'white'
            ctxWatch.beginPath()
            ctxWatch.moveTo(x, y)
            ctxWatch.arc(x, y, radius, 0, 360 * Math.PI / 180, false);
            ctxWatch.closePath()
            // 填充当前绘图（路径）
            ctxWatch.fill()
        }

        function drawHands(lineWidth, length, showPosition){
            ctxWatch.lineWidth = lineWidth
            ctxWatch.beginPath()
            ctxWatch.moveTo(x, y)
            ctxWatch.arc(x, y, length, showPosition, showPosition, false);
            ctxWatch.closePath()
            ctxWatch.stroke()
        }
    </script>
</body>
</html>