当前位置：网站首页>钟表刻度线

钟表刻度线

2022-08-02 03:22:00 【cjx177187】

钟表

思路：

  1. 画一个圆
  2. 给圆上画上刻度线
    1. 将圆划分为60分，每份上画出线
    2. 利用if判断每五个将线条延长，当作小时的刻度
  3. 利用计时器画出时针，分针，秒针

<body>

    <style>

        #box {

            border: 1px solid black;

        }

    </style>

    <canvas id="box" width="600" height="600"></canvas>

    <script>

        var canvas = document.querySelector("#box")

        var pen = canvas.getContext("2d")

        var deg = Math.PI / 180

        var x = 300

        var y = 300

        var r = 150

        //钟表框

        function construction() {

            pen.beginPath()

            pen.arc(y, x, r, 0 * deg, 360 * deg)

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

                var x1 = r * Math.cos(6 * deg * i) + x

                var y1 = r * Math.sin(6 * deg * i) + y

                if (i % 5 == 0) {

                    a = 20

                } else {

                    a = 10

                }

                var x2 = (r - a) * Math.cos(6 * deg * i) + x

                var y2 = (r - a) * Math.sin(6 * deg * i) + y

                pen.moveTo(x1, y1)

                pen.lineTo(x2, y2)

            }

            pen.stroke()

        }

        //秒针

        function seconds() {

            pen.beginPath(300, 300)

            pen.moveTo(300, 300)

            var time = new Date().getSeconds()

            var x3 = 130 * Math.cos(((6 * time) -90) * deg) + x

            var y3 = 130 * Math.sin(((6 * time) -90) * deg) + y

            pen.lineTo(x3, y3)

            pen.stroke()

        }

        //时针

        function hours() {

            pen.beginPath(300, 300)

            pen.moveTo(300, 300)

            var time = new Date().getHours()

            var x4 =60 * Math.cos(((120 * time)+90) * deg) + x

            var y4 =60 * Math.sin(((120 * time)+90) * deg) + y

            pen.lineTo(x4, y4)

            pen.stroke()

        }

        //分针

        function minutes() {

            pen.beginPath(300, 300)

            pen.moveTo(300, 300)

            var time = new Date().getMinutes()

            var x5 = 90 * Math.cos(((10 * time)-90) * deg) + x

            var y5 = 90 * Math.sin(((10 * time)-90) * deg) + y

            pen.lineTo(x5, y5)

            pen.stroke()

        }

        //计时器运转秒针

        setInterval(function () {

            canvas.width = 600

            seconds()

            hours()

            minutes()

            construction()

        }, 1000)

    </script>

原网站

版权声明
本文为[cjx177187]所创，转载请带上原文链接，感谢
https://blog.csdn.net/cjx177187/article/details/125957166

边栏推荐

猜你喜欢

随机推荐