canvas时钟绘制方法总结

最新推荐文章于 2023-10-25 17:07:02 发布

水星梦月

最新推荐文章于 2023-10-25 17:07:02 发布

阅读量748

点赞数

文章标签： html html5 javascript

本文链接：https://blog.csdn.net/monparadis/article/details/121138529

版权

1.首先需要一个画布，因为要画时钟肯定需要计算角度，Math.PI*degree/180，所以将Math.PI存起来

2.绘制表盘，表盘是由60个刻度线构成，时间整点刻度是5的倍数，用着个特点来算刻度线的颜色和宽度

3.绘制时钟一定要知道时间，然后计算时分秒角度

4.绘制时分秒

5.指针时刻在走动，每次绘制记得把画布清空，上面绘制表盘里面使用了清空方法

注意点：每次的状态记得保存，每一帧画完记得清空

绘制完一帧记得使用closePath的方法不然会产生覆盖，最明显的就是颜色，比如指针三个颜色都是最后一个颜色

完成代码如下：

<!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>Document</title>
    <style>
        html, body {
            padding: 0;
            margin: 0;
        }
        #canvas {
            background: black;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        var canvas = document.getElementById('canvas')
            ctx = canvas.getContext('2d')
            canvas.width = 400
            canvas.height = 400
            pi = Math.PI
        // 绘制表盘
        function drawDial () {
            ctx.clearRect(0,0, 400,400)
            ctx.save()
            // 设置新原点
            ctx.translate(150, 150)
            // 绘制表盘，由60个刻度构成
            for (let i = 0; i < 60; i ++) {
                ctx.save()
                // 从正上方开始绘制刻度，也就是-90°开始使用公式 -90*Math*PI/180
                // 一个刻度是360°/60°
                ctx.rotate(-pi/2 + i*pi/30)
                ctx.beginPath()
                ctx.moveTo(148, 0)
                ctx.lineTo(135, 0)
                ctx.strokeStyle = i % 5 ? 'blue' : 'red'
                ctx.lineWidth = i % 5 ? 2 : 4
                ctx.stroke()
                ctx.closePath()
                ctx.restore()
            }
            ctx.restore()
        }
        // 计算当前时间的时分秒指针的旋转角度
        function calcPointerAngle () {
            // 得到当前时间的时分秒
            var time = new Date()
            var s = time.getSeconds()
            var m = time.getMinutes()
            var h = time.getHours()
            // 一个刻度是6°
            var sAngle = s*pi/30
            var mAngle = m*pi/30 + sAngle/60
            // 一个小时5个刻度30°
            var hAngle = h*pi/6 + mAngle/60
            // 根据角度绘制指针
            this.drawPinter('blue', 125, sAngle, 2)
            this.drawPinter('red', 110, mAngle, 3)
            this.drawPinter('orange', 60, hAngle, 4)
        }
        // 绘制指针
        function drawPinter (color, length, angle, width) {
            ctx.save()
            ctx.translate(150, 150)
            ctx.rotate(-pi/2 + angle)
            ctx.beginPath()
            ctx.moveTo(0,0)
            ctx.lineTo(length, 0)
            ctx.strokeStyle = color
            ctx.lineWidth = width
            ctx.lineCap = 'round'
            ctx.stroke()
            ctx.closePath()
            ctx.restore()
        }
        // 我们需要实时更新指针，把画布清空
        function init () {
            requestAnimationFrame(function step() {
                this.drawDial()
                this.calcPointerAngle()
                requestAnimationFrame(step)
            })
        }
        init()
    </script>
</body>
</html>

学习地址菜鸟哦，代码有问题或更优的方式，谢谢指教哈

水星梦月

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
canvas时钟绘制方法总结

1.首先需要一个画布，因为要画时钟肯定需要计算角度，Math.PI*degree/180，所以将Math.PI存起来2.绘制表盘，表盘是由60个刻度线构成，时间整点刻度是5的倍数，用着个特点来算刻度线的颜色和宽度3.绘制时钟一定要知道时间，然后计算时分秒角度4.绘制时分秒5.指针时刻在走动，每次绘制记得把画布清空，上面绘制表盘里面使用了清空方法注意点：每次的状态记得保存，每一帧画完记得清空绘制完一帧记得使用closePath的方法...
复制链接

扫一扫