美文网首页JSjs前端
canvas实现钟表

canvas实现钟表

作者: LongFor_ | 来源:发表于2019-06-02 16:02 被阅读403次

canvas实现钟表效果,代码附在文章最后。


第一步当然是创建一个canvas画布,我这里写的是居中的画布,所以css样式需要做一下修改

然后通过js获取到canvas元素以及画笔。

  我这里写的是一个函数,把所有的逻辑都写在了这个函数内,然后通过定时器,实现动画效果,函数每次进来时都会去清空画布。

重要的地方来了。既然是写钟表,那么肯定少不了获取时间对象了,毕竟想让钟表动起来的关键就在于它。

  需要注意的是,时针取得不能是整数,取整数会造成时针只会在某个小时哪里保持不动。像下面图片这样,明明是3.44分,时针却一直指向3。

  我们需要的效果是这样的,时针会跟随分针移动。

  表盘部分

  标注小时时间

  画小时刻度。这里需要注意的是translate和rotate。它们分别是移动和旋转。因为我的圆心位置是在(250,250),所以想把线段移动到外圈就需要进行移动。至于旋转可以这样想,每个时针的刻度为30度,所以通过j*30*Math.PI/180得到的就是每个刻度的具体位置。

  画分针刻度,这里的旋转可以理解为每个分针刻度的读数为6度

  画时针

  画分针

  画秒针

  画中心位置

现在所有的逻辑都已经走完了,我们需要的就只是一个定时器,来让我们的钟表实现动画效果

  完整代码如下:


<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>

        * {

            margin: 0;

            padding: 0;

        }

        canvas {

            border: 1px solid #ccc;

            position: absolute;

            left: 0;

            right: 0;

            top: 0;

            bottom: 0;

            margin: 100px auto;

        }

    </style>

</head>

<body>

    <canvas width="500" height="500"></canvas>

    <script>

        var canvas = document.getElementsByTagName('canvas')[0];

        var ctx = canvas.getContext('2d');

        function zhongBiao() {

            ctx.clearRect(0, 0, canvas.width, canvas.height)

            var now = new Date();

            var hour = now.getHours();

            var minute = now.getMinutes();

            var second = now.getSeconds();

            hour = hour + minute / 60                                 

            hour = hour > 12 ? hour - 12 : hour;

            ctx.beginPath();

            ctx.lineWidth = '5';

            ctx.arc(250, 250, 200, 0, 2 * Math.PI);

            ctx.strokeStyle = 'rgba(16, 214, 204, 0.664)';

            ctx.stroke();

            ctx.closePath();

            ctx.font = '30px 微软雅黑';

            ctx.fillStyle = '#000';

            ctx.fillText('12', 235, 105);

            ctx.fillText('11', 160, 130);

            ctx.fillText('10', 100, 180);

            ctx.fillText('9', 80, 260);

            ctx.fillText('8', 105, 340);

            ctx.fillText('7', 170, 400);

            ctx.fillText('6', 240, 420);

            ctx.fillText('5', 320, 400);

            ctx.fillText('4', 375, 340);

            ctx.fillText('3', 400, 260);

            ctx.fillText('2', 380, 180);

            ctx.fillText('1', 320, 130);

            for (var j = 0; j < 12; j++) {

                ctx.save();

                ctx.beginPath();

                ctx.lineWidth = '6';

                ctx.strokeStyle = 'rgba(219, 74, 16, 0.863)';

                ctx.translate(250, 250);

                ctx.rotate(j * 30 * Math.PI / 180);

                ctx.moveTo(0, -200);

                ctx.lineTo(0, -180);

                ctx.stroke();

                ctx.closePath();

                ctx.restore();

            }

            for (var i = 0; i < 60; i++) {

                if (i % 5 != 0) {

                    ctx.save();

                    ctx.lineWidth = 5;

                    ctx.strokeStyle = "crimson";

                    ctx.translate(250, 250);

                    ctx.rotate(i * 6 * Math.PI / 180);

                    ctx.beginPath();

                    ctx.moveTo(0, -200);

                    ctx.lineTo(0, -190);

                    ctx.stroke();

                    ctx.closePath();

                    ctx.restore();

                }

            }

            ctx.save();

            ctx.lineWidth = 10;

            ctx.strokeStyle = "#ccc";

            ctx.translate(250, 250);

            ctx.rotate(hour * 30 * Math.PI / 180);

            ctx.beginPath();

            ctx.moveTo(0, -175);

            ctx.lineTo(0, 20);

            ctx.stroke();

            ctx.closePath();

            ctx.restore();

            ctx.save();

            ctx.lineWidth = 5;

            ctx.strokeStyle = "red";

            ctx.translate(250, 250);

            ctx.rotate(minute * 6 * Math.PI / 180);

            ctx.beginPath();

            ctx.moveTo(0, -155);

            ctx.lineTo(0, 20);

            ctx.stroke();

            ctx.closePath();

            ctx.restore();

            ctx.save();

            ctx.lineWidth = 5;

            ctx.strokeStyle = "pink";

            ctx.translate(250, 250);

            ctx.rotate(second * 6 * Math.PI / 180);

            ctx.beginPath();

            ctx.moveTo(0, -135);

            ctx.lineTo(0, 20);

            ctx.stroke();

            ctx.closePath();

            ctx.restore();

            ctx.beginPath();

            ctx.arc(250, 250, 10, 0, 2 * Math.PI);

            ctx.fillStyle = 'blue'

            ctx.fill();

            ctx.closePath();

        }

        setInterval(function () {

            zhongBiao()

        }, 1000)

        zhongBiao()

    </script>

</body>

</html>

相关文章

网友评论

    本文标题:canvas实现钟表

    本文链接:https://www.haomeiwen.com/subject/lvogtctx.html