canvas 绘制时钟（二）(2021/5/8)

叁歲伎倆 2023-01-19 08:12 172阅读 0赞

<canvas id="canvas" width="800" height="600"></canvas>
    <script>
            var canvas = document.querySelector('#canvas')
            var cxt = canvas.getContext('2d')
    
    
            function renderClock() { 
                    cxt.save() //保存最开始的状态
                    // 绘制表盘
                    cxt.beginPath()
                    cxt.translate(400, 300)// 偏移坐标尺的位置,使得内容基于表盘中心作图
    
                    cxt.rotate(-2 * Math.PI / 4) //逆时针旋转表盘
                    cxt.arc(0, 0, 200, 0, 2 * Math.PI) //画圆
                    cxt.strokeStyle = "darkgrey"
                    cxt.lineWidth = 10;// 表盘宽度
                    cxt.stroke() //描边
                    cxt.closePath()
                    // 先保存起来 防止后安的操作需要回退到之前的位置，会因为没有保存而把坐标旋转到不知去向
                    cxt.save();
                    // 绘制秒钟刻度
                    for (var i = 0; i < 60; i++) { 
                            cxt.rotate(2 * Math.PI / 60)
                            cxt.beginPath()
                            cxt.moveTo(180, 0)
                            cxt.lineTo(190, 0)
                            cxt.lineWidth = 6
                            cxt.strokeStyle = "pink"
                            cxt.stroke()
                            cxt.closePath()
                    }
                    cxt.restore() //把旋转过的刻度盘回退到原先位置方便后续操作
    
                    cxt.save();
                    // 绘制时针刻度
                    for (var i = 0; i < 12; i++) { 
                            cxt.rotate(2 * Math.PI / 12)
                            cxt.beginPath()
                            cxt.moveTo(180, 0)
                            cxt.lineTo(200, 0)
                            cxt.strokeStyle = "darkgrey"
                            cxt.stroke()
                            cxt.closePath()
                    }
                    cxt.restore() //把旋转过的刻度盘回退到原先位置方便后续操作
                    cxt.save()
    
                    // 获取时间对象
                    var time = new Date()
                    var hour = time.getHours()
                    var min = time.getMinutes()
                    var sec = time.getSeconds()
    
                    hour = hour > 12 ? hour - 12 : hour
                    console.log(hour + ":" + min + ":" + sec)
    
                    // 绘制秒针
                    cxt.beginPath()
                    // 根据秒针的时间进行旋转
                    cxt.rotate(2 * Math.PI / 60 * sec)
                    cxt.moveTo(-30, 0)
                    cxt.lineTo(170, 0)
                    cxt.strokeStyle = "red"
                    cxt.lineWidth = 2
                    cxt.stroke()
                    cxt.closePath()
                    cxt.restore()
                    cxt.save()
    
                    // 绘制分针
                    cxt.beginPath()
                    // 根据秒针的时间进行旋转
                    cxt.rotate(2 * Math.PI / 60 * min + 2 * Math.PI / 60 / 60 * sec)
                    cxt.moveTo(-20, 0)
                    cxt.lineTo(160, 0)
                    cxt.strokeStyle = "darkblue"
                    cxt.lineWidth = 4
                    cxt.stroke()
                    cxt.closePath()
                    cxt.restore()
                    cxt.save()
    
    
                    // 绘制时针
                    cxt.beginPath()
                    // 根据秒针的时间进行旋转
                    cxt.rotate(2 * Math.PI / 12 * hour + 2 * Math.PI / 60 / 12 * min + 2 * Math.PI / 12 / 60 / 60 * sec)
                    cxt.moveTo(-10, 0)
                    cxt.lineTo(140, 0)
                    cxt.strokeStyle = "dark"
                    cxt.lineWidth = 6
                    cxt.stroke()
                    cxt.closePath()
                    cxt.restore()
                    cxt.restore() // 返回到最初的坐标尺
            }
    
            setInterval(() => { 
                    cxt.clearRect(0,0,800,600)
                    renderClock();
            }, 1000);
    
    </script>