canvas 画时钟

最新推荐文章于 2024-07-16 16:43:05 发布

好梦爱醒

最新推荐文章于 2024-07-16 16:43:05 发布

阅读量119

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_42343410/article/details/129258535

版权

1 在html中添加 canvas 标签

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

2 获取画笔

/**@type {HTMLCanvasElement} */
     let canvas = document.getElementById("canvas");
     let ctx = canvas.getContext("2d");

3，绘制表盘

			ctx.save();
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.translate(canvas.width / 2, canvas.height / 2);
            ctx.beginPath();
            ctx.lineWidth = 15;
            // 表盘
            ctx.rotate(-Math.PI / 2);
            ctx.arc(0, 0, 200, 0, 2 * Math.PI);
            ctx.stroke();

4 绘制刻度

// 刻度
            ctx.save();
            for (let index = 1; index <= 60; index++) {
                ctx.beginPath();
                ctx.rotate(Math.PI / 30);
                ctx.strokeStyle = "black";
                ctx.lineCap = "round";
                ctx.lineWidth = 5;
                if (index % 5 != 0) {
                    ctx.moveTo(190, 0);
                    ctx.lineTo(185, 0);
                } else {
                    ctx.strokeStyle = "red";
                    ctx.lineWidth = 8;
                    ctx.moveTo(190, 0);
                    ctx.lineTo(180, 0);
                    // ;
                }
                ctx.stroke();
                ctx.closePath();
            }
            ctx.restore();

5，标记时间数字参考数字调正


			ctx.save();
            ctx.rotate(Math.PI / 2);
            var clockRadius = 250;
            ctx.font = '24px Arial';
            ctx.fillStyle = '#000';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle'
            for (let n = 1; n <= 12; n++) {
                let theta = (n - 3) * (Math.PI * 2) / 12;
                var x = clockRadius * 0.65 * Math.cos(theta);
                var y = clockRadius * 0.65 * Math.sin(theta);
                ctx.fillText(n, x, y);
            }
            ctx.restore();

园的路径默认是顺时针

在这里插入图片描述

6，弧度计算

            ctx.rotate(Math.PI / 2);
            // 时针

            var hours = now.getHours();
            var minutes = now.getMinutes();
            var seconds = now.getSeconds();
            hours = hours > 12 ? hours - 12 : hours;
            var hour = hours + minutes / 60;
            var minute = minutes + seconds / 60;



            var theat = (hour - 3) * (2 * Math.PI) / 12;
            ctx.save();

            ctx.rotate(theat);
            ctx.beginPath();

            ctx.moveTo(-15, -4);
            ctx.lineTo(-15, 4);
            ctx.lineTo(clockRadius * 0.45, 1);
            ctx.lineTo(clockRadius * 0.45, -1);
            ctx.fill();

            ctx.restore();

            var theta = (minute - 15) * 2 * Math.PI / 60;
            // 分针
            ctx.save();

            ctx.rotate(theta);
            ctx.beginPath();
            ctx.fillStyle = "green";
            ctx.moveTo(-20, -4);
            ctx.lineTo(-20, 4);
            ctx.lineTo(clockRadius * 0.55, 1);
            ctx.lineTo(clockRadius * 0.55, -1);
            ctx.fill();
            ctx.restore();


            //秒针
            var theta = (seconds - 15) * 2 * Math.PI / 60;
            ctx.save();

            ctx.rotate(theta);
            ctx.beginPath();
            ctx.fillStyle = "blue";
            ctx.moveTo(-25, -4);
            ctx.lineTo(-25, 4);
            ctx.lineTo(clockRadius * 0.7, 1);
            ctx.lineTo(clockRadius * 0.7, -1);
            ctx.fill();
            ctx.restore();
            //中心圆点
            ctx.save();
            ctx.beginPath();
            ctx.fillStyle = "#D40000";
            ctx.arc(0, 0, 8, 0, Math.PI * 2, true);
            ctx.fill();
            ctx.restore();
            ctx.restore();
        };