canvas制作一个简易时钟

效果如下：
canvas制作一个简易时钟
之前写的博客canvas基本用法，基本动画转换、旋转、缩放
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #myCanvas {
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="600" height="600"></canvas>
    <script>
        // 1、获取画布节点
        let myCanvas = document.getElementById("myCanvas");
        // 2、通过画布节点区获取画笔
        let pen = myCanvas.getContext("2d");
        pen.translate(300, 300);//把画布的中心点设为画布的0，0点
        scale();

        setInterval(() => {
            scale();
        }, 10);//每个10毫秒就获取一次,防止网路卡顿的情况下显示不正常

        //整个时钟封装函数
        function scale() {
            pen.clearRect(-300, -300, myCanvas.width, myCanvas.height);//每一次都清空一下画布
            pen.save();
            //时钟圆的样式
            pen.strokeStyle = '#FF5511';
            pen.lineWidth = '8';
            pen.beginPath();
            pen.arc(0, 0, 200, 0, 360 * Math.PI / 180);
            pen.stroke();
            pen.restore();
			//绘制刻度的样式
            pen.save();
            pen.strokeStyle = "orange";
            pen.lineCap = "round";
            pen.beginPath();          
            for (let i = 0; i < 60; i++) {//一共循环60次，也就是60分钟，画60个刻度
                pen.moveTo(0, -185);
                if (i % 5 == 0) {//整点刻度
                    pen.lineTo(0, -155);
                } else {
                    pen.lineTo(0, -170);
                    pen.lineWidth = 6;
                }
                pen.rotate(6 * Math.PI / 180);//每次旋转的角度6°=360°/60
            }
            pen.stroke();
            pen.restore();
            
			//日期对象
            let dt = new Date();
            let hour = dt.getHours();//获取小时 北京时间
            let minute = dt.getMinutes();//获取分
            let second = dt.getSeconds();//获取秒
			
			//秒针
            pen.save();
            //样式
            pen.lineWidth = 5;
            pen.lineCap = "round";
            pen.rotate(second * 6 * Math.PI / 180);//旋转的弧度 = 当前时间的秒数*6° * Math.PI / 180
            pen.beginPath();
            //图形的绘制
            pen.moveTo(0, 0);
            pen.lineTo(0, -100);
            pen.stroke();
            pen.restore();

            //分针
            pen.save();
            //样式
            pen.lineWidth = `7`;
            pen.lineCap = "round";
            //旋转的弧度 = （当前时间的秒数+当前分钟数/60）*6° * Math.PI / 180
            pen.rotate((minute + second / 60) * 6 * Math.PI / 180);
            pen.beginPath();
            //图形的绘制
            pen.moveTo(0, 0);
            pen.lineTo(0, -80);
            pen.stroke();
            pen.restore();

            //时针
            pen.save();
            //样式
            pen.lineWidth = `10`;
            pen.lineCap = "round";
            //旋转的弧度 = （当前时间的小时数-12+当前分钟数/60）*6° * Math.PI / 180
            pen.rotate((hour - 12 + minute / 60) * 30 * Math.PI / 180);
            pen.beginPath();
            //图形的绘制
            pen.moveTo(0, 0);
            pen.lineTo(0, -60);
            pen.stroke();
            pen.restore();

        }
    </script>
</body>

</html>
canvas制作一个简易时钟

相关推荐
