当前位置：网站首页>canvas canvas drawing clock

canvas canvas drawing clock

2022-08-10 05:09:00 【Miss Zhou.】
利用canvasDraw a small of the clockdemo
<!--
 * @Author: [email protected] [email protected]
 * @Date: 2022-08-06 11:04:07
 * @LastEditors: [email protected] [email protected]
 * @LastEditTime: 2022-08-07 15:56:21
 * @FilePath: \canvas\clock-canvas.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<!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>时钟</title>
</head>

<body>
    <canvas id="canvas" width="800" height="600"></canvas>

    <script type="text/javascript">
        let canvas = document.querySelector('#canvas')
        let cxt = canvas.getContext('2d')
        function renderClock () {
            cxt.clearRect(0, 0, 800, 600)//清除画布
            // 使用 save() 方法对当前画布区域进行保存,并在以后的任意时间对其进行恢复（通过 restore() 方法）.
            cxt.save()//The previous state of the brush is preserved
            // 将坐标移动到画布的中央
            cxt.translate(400, 300)
            cxt.rotate(-2 * Math.PI / 4)//旋转90Let the starting angle in degrees,由原来的（弧的圆形的三点钟位置是 0 度）改为12点位置
            cxt.save()
            /**
             * cxt.arc参数说明
             * x 坐标
             * 圆的中心的 y 坐标.
             * 圆的半径.
             * 起始角,以弧度计（弧的圆形的三点钟位置是 0 度）
             * 结束角,以弧度计.
             * 可选.规定应该逆时针还是顺时针绘图.False = 顺时针,true = 逆时针.
            */
            // Create a circle drawing watch face
            cxt.beginPath()//开始路径
            cxt.arc(0, 0, 200, 0, 2 * Math.PI)
            cxt.strokeStyle = "darkgrey"
            cxt.lineWidth = 10//The side width of the circle
            cxt.stroke()//actually draws the path.默认颜色是黑色.
            cxt.closePath()//End the path and draw the scale again;Otherwise it will stick to the circle

            //分钟
            for (let j = 0; j < 60; j++) {
                cxt.rotate(Math.PI / 30)// 转6度
                cxt.beginPath()
                cxt.moveTo(180, 0)//xThe tick radius is 200所以可以从x为180,Y轴为0开始到200draw the position20long scale
                cxt.lineTo(190, 0)
                cxt.lineWidth = '2'
                cxt.strokeStyle = "orangered"
                cxt.stroke()
                cxt.closePath()
            }
            cxt.restore()
            cxt.save()
            // 绘制小时刻度
            for (let i = 0; i < 12; i++) {
                cxt.rotate(Math.PI / 6)//每次旋转30度
                cxt.beginPath()
                cxt.moveTo(180, 0)//xThe tick radius is 200所以可以从x为180,Y轴为0开始到200draw the position20long scale
                cxt.lineTo(200, 0)
                cxt.lineWidth = 8//The side width of the circle
                cxt.strokeStyle = "darkgrey"
                cxt.stroke()
                cxt.closePath()
            }
            // 时间
            let time = new Date()
            let H = time.getHours()
            let M = time.getMinutes()
            let S = time.getSeconds()
            // 如果时间大于12就直接减去12 (如:当前为17点;那就是17-13=5点)
            H = H > 12 ? H - 12 : H
            console.log('当前小时', H + ':' + M + ':' + S);

            cxt.beginPath()
            // 绘制秒针
            cxt.rotate(2 * Math.PI / 60 * S)//The ticks rotated per second are multiplied by seconds
            cxt.moveTo(-30, 0)//xThe tick radius is 200所以可以从x为180,Y轴为0开始到200draw the position20long scale
            cxt.lineTo(170, 0)
            cxt.lineWidth = 2//The side width of the circle
            cxt.strokeStyle = "red"
            cxt.stroke()
            cxt.closePath()

            cxt.restore()
            cxt.save()
            // 绘制分针
            cxt.beginPath()
            cxt.rotate(2 * Math.PI / 60 * M + 2 * Math.PI / 3600 * S)//One circle per minute360为一圈,一圈有60minutes so divide by60Multiply by minutes to get the angle of rotation,加上3600A second is an hour
            cxt.moveTo(-20, 0)//xThe tick radius is 200所以可以从x为180,Y轴为0开始到200draw the position20long scale
            cxt.lineTo(140, 0)
            cxt.lineWidth = 4//The side width of the circle
            cxt.strokeStyle = "darkblue"
            cxt.stroke()
            cxt.closePath()
            cxt.restore()
            cxt.save()

            // 绘制小时
            cxt.beginPath()
            cxt.rotate(2 * Math.PI / 12 * H + 2 * Math.PI / 60 / 12 * M + 2 * Math.PI / 12 / 60 / 60 * S)//一小时有12刻度,Multiply by the current hour+分钟(一圈360度/60分钟/12The hour is multiplied by the current minute)+The algorithm of seconds finally gets the angle traveled per hour
            cxt.moveTo(-20, 0)//xThe tick radius is 200所以可以从x为180,Y轴为0开始到200draw the position20long scale
            cxt.lineTo(100, 0)
            cxt.lineWidth = 6//The side width of the circle
            cxt.strokeStyle = "darkslategray"


            cxt.beginPath()
            // Small circle in the center of the pointer
            cxt.arc(0, 0, 8, 0, 2 * Math.PI)
            cxt.fillStyle = "deepskyblue"
            cxt.fill()
            cxt.restore()
            cxt.restore()//恢复到初始状态

        }
        setInterval(() => {
            renderClock()
        }, 1000);


    </script>
</body>

</html>
原网站
版权声明
本文为[Miss Zhou.]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/222/202208100434159816.html
当前位置：网站首页>canvas canvas drawing clock

canvas canvas drawing clock

边栏推荐

猜你喜欢

随机推荐
