js+Canvas实现时钟图，简单易懂

最新推荐文章于 2023-08-15 09:43:01 发布

gisercug

最新推荐文章于 2023-08-15 09:43:01 发布

阅读量1.3k

点赞数 2

分类专栏： html 前端面试文章标签： canvas js 时钟图入门 html

本文链接：https://blog.csdn.net/gisercug/article/details/95018537

版权

前端同时被 3 个专栏收录

21 篇文章 0 订阅

订阅专栏

面试

8 篇文章 0 订阅

订阅专栏

html

5 篇文章 0 订阅

订阅专栏

在这里插入图片描述
本文主要参考canvas入门网址，加上自己理解将钟表图用原生js写出来，有两个难点
1.整个时钟的实现的难点和重点是save（）和restore（）的进栈出栈，后进先出，理解的有点难，参考上面的网址很好理解，最后需要让第一个进栈的出栈
2， requestAnimFrame()这个函数，功能强大，类似于定时器，但其兼容性不好，之前没了解好，直接拿来用，结果导致了错误，具体优点可以参考这篇文章更好的理解requestAnimFrame()
下面是全部代码，粘贴，在谷歌浏览器可以完美运行。

<!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>cloak</title>
</head>
<!-- 整个时钟的实现的难点和重点是save（）和restore（）的进栈 出栈，后进先出，理解的有点问题，最后让第一个进栈的出栈 -->

<body>
    <canvas id="cloak" width="800" height="800" style="border:1px solid #000000;"></canvas>
    <script>
        //为了让requestAnimFrame兼容所有的浏览器，耽误了大量的时间，两小时。本人用的最新的谷歌浏览器，气，这个优点很多相比定时器
        window.requestAnimFrame = (function() {
            return window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                function(callback) {
                    window.setTimeout(callback, 6000 / 60);
                };
        })();

        function draw() {
            var canvas = document.getElementById('cloak');
            if (!canvas.getContext) return;
            var ctx = canvas.getContext("2d");
            ctx.clearRect(0, 0, 800, 800);
            ctx.save();
            ctx.translate(400, 400);
            let timer = new Date();
            let sec = timer.getSeconds();
            let min = timer.getMinutes();
            let hour = timer.getHours();
            // 绘制秒针
            ctx.save();
            ctx.rotate(Math.PI * 2 * sec / 60);
            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.lineTo(0, -105);
            ctx.lineWidth = 2;
            ctx.strokeStyle = "green";
            ctx.closePath();
            ctx.stroke();
            ctx.restore();
            //绘制分针
            ctx.save();
            ctx.rotate(Math.PI * 2 * min / 60);
            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.lineTo(0, -80);
            ctx.strokeStyle = 'orange';
            ctx.lineWidth = 3;
            ctx.closePath();
            ctx.stroke();
            ctx.restore();
            //绘制时针
            ctx.save();
            ctx.rotate(Math.PI * 2 * hour / 12);
            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.lineTo(0, -70);
            ctx.strokeStyle = 'red';
            ctx.lineWidth = 5;
            ctx.closePath();
            ctx.stroke();
            ctx.restore();
            //中心的原点
            ctx.beginPath();
            ctx.arc(0, 0, 2, 0, 2 * Math.PI);
            ctx.strokeStyle = "red";
            ctx.stroke();
            //绘制表盘
            for (let i = 1; i < 13; i++) {
                ctx.save();
                ctx.rotate(Math.PI * 2 * i / 12);
                ctx.beginPath();
                ctx.moveTo(0, 100);
                ctx.lineTo(0, 110);
                ctx.strokeStyle = 'blue';
                ctx.lineWidth = i % 3 ? 2 : 4;
                ctx.strokeStyle = i % 3 ? "blue" : "red";
                ctx.closePath();
                ctx.stroke();
                ctx.restore();
            }
            ctx.restore();
            requestAnimFrame(draw);
        };
        requestAnimFrame(draw);
    </script>
</body>

</html>