当前位置：网站首页>clock tick marks

clock tick marks

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

钟表

思路：

  1. 画一个圆
  2. Draw tick marks on the circle
    1. Divide the circle into60分,Draw lines on each
    2. 利用ifJudge every five to extend the line,as hour markers
  3. Use the timer to draw the hour hand,分针,秒针

<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

        //clock frame

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

        }

        //The chronograph runs the second hand

        setInterval(function () {

            canvas.width = 600

            seconds()

            hours()

            minutes()

            construction()

        }, 1000)

    </script>

原网站

版权声明
本文为[cjx177187]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/214/202208020321321046.html

边栏推荐

猜你喜欢

随机推荐