canvas实现简单时钟

Alan Lu Pop

已于 2023-05-21 19:26:33 修改

阅读量232

点赞数 3

分类专栏： HTML 文章标签： javascript vue.js 前端

于 2022-05-28 22:58:50 首次发布

本文链接：https://blog.csdn.net/paopao_pop/article/details/125024753

版权

HTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

最近有canvas的业务需求，就学习了一下canvas，交一下作业

<!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>
</head>

<body>
    <canvas id="canvas1" width="800" height="600">
        你的浏览器不支持canvas
    </canvas>

    <script>
        let Can = document.querySelector('#canvas1');
        // console.log(Can);
        let ctx = Can.getContext('2d');
        // console.log(ctx);



        function renderClock() {
            // 每次清除画布
            ctx.clearRect(0, 0, 800, 600);


            // 保留初始的状态
            ctx.save();

            // 将坐标移到画布中心
            ctx.translate(400, 300);
            //画小时数
            const hourArray = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];

            const MPI = Math.PI;

            hourArray.forEach(function (num, i) {
                let rad = 2 * MPI / 12 * i;
                let x = Math.cos(rad) * 160;
                let y = Math.sin(rad) * 160;
                ctx.font = "18px sans-serif";
                ctx.textAlign = "center";
                ctx.textBaseline = "middle";
                ctx.fill();
                ctx.fillText(num, x, y);

            });


            let time = new Date();
            // 如果时间大于12就是下午减去12
            let hour = time.getHours() > 12 ? time.getHours() - 12 : time.getHours();
            let min = time.getMinutes();
            let sec = time.getSeconds();

            ctx.font = "18px sans-serif";
            ctx.textAlign = "center";
            ctx.textBaseline = "middle";
            ctx.fillStyle = '#FF0000';
            ctx.fill();
            ctx.fillText(`${hour < 10 ? 0 : ''}${hour}:${min < 10 ? 0 : ''}${min}:${sec < 10 ? 0 : ''}${sec}`, 0, 100);
            console.log(`${hour < 10 ? 0 : ''}${hour}:${min < 10 ? 0 : ''}${min}:${sec < 10 ? 0 : ''}${sec}`);
            ctx.rect(-40, 85, 80, 30);
            ctx.strokeStyle = "#FF0000";
            ctx.stroke();


            ctx.rotate(-2 * MPI / 4);
            ctx.save();


            // 绘制表盘
            ctx.beginPath();
            ctx.arc(0, 0, 200, 0, 2 * MPI);
            ctx.strokeStyle = '#999';
            ctx.lineWidth = 5;
            ctx.stroke();
            ctx.closePath();


            // 绘制时钟刻度
            for (let i = 0; i < 12; i++) {
                ctx.beginPath();
                ctx.rotate(MPI / 6);
                ctx.moveTo(185, 0);
                ctx.lineTo(200, 0);
                ctx.strokeStyle = '#999';
                ctx.lineWidth = 10;
                // ctx.fillText(`${i + 1}`, 160, 5);
                ctx.stroke();
                ctx.closePath();

            };

            ctx.restore();
            ctx.save();

            // 绘制秒针刻度
            for (let j = 0; j < 60; j++) {
                ctx.beginPath();
                ctx.rotate(MPI / 30);
                ctx.moveTo(190, 0);
                ctx.lineTo(200, 0);
                ctx.strokeStyle = '#999';
                ctx.lineWidth = 2;
                ctx.stroke()
                ctx.closePath();

            }
            ctx.restore();
            ctx.save();




            // 绘制秒针
            ctx.beginPath();
            // 根据秒针的时间旋转
            ctx.rotate(2 * MPI / 60 * sec)
            ctx.moveTo(-30, 0);
            ctx.lineTo(170, 0);
            ctx.strokeStyle = 'red';
            ctx.lineWidth = 2;
            ctx.stroke();
            ctx.closePath();

            ctx.restore();
            ctx.save();



            // 绘制分针
            ctx.beginPath();
            // 根据分针的时间旋转
            ctx.rotate(2 * MPI / 60 * min + 2 * MPI / 3600 * sec)
            ctx.moveTo(-10, 0);
            ctx.lineTo(150, 0);
            ctx.strokeStyle = '#999';
            ctx.lineWidth = 3;
            ctx.stroke();
            ctx.closePath();

            ctx.restore();
            ctx.save();




            // 绘制时针
            ctx.beginPath();
            // 根据时针的时间旋转
            ctx.rotate(2 * MPI / 12 * hour + 2 * MPI / 60 / 12 * min + 2 * MPI / 12 / 60 / 60 * sec)
            ctx.moveTo(-10, 0);
            ctx.lineTo(100, 0);
            ctx.strokeStyle = '#999';
            ctx.lineWidth = 3;
            ctx.stroke();
            ctx.closePath();

            ctx.restore();
            ctx.save();




            // h绘制中心点
            ctx.beginPath();
            ctx.arc(0, 0, 8, 0, 2 * MPI);
            ctx.fillStyle = "red";
            ctx.fill();
            ctx.closePath();



            // 回退初始状态
            ctx.restore();
            ctx.restore();

        }


        setInterval(function () {
            renderClock();
        }, 1000);


    </script>
</body>

</html>

效果如下，可以复制粘贴代码直接运行

一个前端小白的日常

Alan Lu Pop

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
canvas实现简单时钟

最近有canvas的业务需求，就学习了一下canvas，交一下作业<!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, initia
复制链接

扫一扫