Heim > Artikel > Web-Frontend > Codebeispiel für das Zeichnen einer Uhr in Canvas

Codebeispiel für das Zeichnen einer Uhr in Canvas

不言nach vorne: 2019-03-12 16:37:382737Durchsuche

Der Inhalt dieses Artikels befasst sich mit dem Codebeispiel zum Zeichnen einer Uhr mit Canvas. Freunde in Not können sich darauf beziehen.

Vollständiger Code:

<!DOCTYPE html>
<html>
<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 type="text/css">
        div {
            text-align: center;
            margin-top: 250px;
        }
    </style>
</head>

<body>
    <div>
        <canvas id="clock" height="200px" width="200px">你的浏览器不支持canvas</canvas>
    </div>

    <script>
        var dom = document.getElementById('clock');
        var ctx = dom.getContext('2d');
        var width = ctx.canvas.width;
        var height = ctx.canvas.height;
        var r = width / 2;


        //绘制表盘
        function drawBackground() {
            ctx.save();
            ctx.translate(r, r);
            ctx.beginPath();
            ctx.lineWidth = 10;

            ctx.arc(0, 0, r - 5, 0, 2 * Math.PI, false);
            ctx.stroke();

            var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
            ctx.font = '18px Arial';
            ctx.textAlign = 'center';

            ctx.textBaseline = 'middle';

            //小时数字
            hourNumbers.forEach(function (number, i) {
                var rad = 2 * Math.PI / 12 * i;
                var x = Math.cos(rad) * (r - 30);
                var y = Math.sin(rad) * (r - 30);
                ctx.fillText(number, x, y);
                // console.log(x)
            })

            //绘制分刻度
            for (var i = 0; i < 60; i++) {
                var rad = 2 * Math.PI / 60 * i;
                var x = Math.cos(rad) * (r - 18);
                var y = Math.sin(rad) * (r - 18);
                ctx.beginPath();
                if (i % 5 == 0) {
                    ctx.fillStyle = &#39;#000&#39;;
                    ctx.arc(x, y, 2, 0, 2 * Math.PI, false);
                } else {
                    ctx.fillStyle = &#39;#ccc&#39;;
                    ctx.arc(x, y, 2, 0, 2 * Math.PI, false);
                }

                ctx.fill();
            }

        }



        //绘制时针
        function drawHour(hour, minute) {
            ctx.save();
            ctx.beginPath();
            var rad = 2 * Math.PI / 12 * hour;
            var mrad = 2 * Math.PI / 12 / 60 * minute;
            ctx.rotate(rad + mrad);
            ctx.lineWidth = 6;
            ctx.lineCap = &#39;round&#39;;
            ctx.moveTo(0, 10);
            ctx.lineTo(0, -r / 2);
            ctx.stroke();
            ctx.restore();
        }


        //绘制分针
        function drawMinute(minute) {
            ctx.save();
            ctx.beginPath();
            var rad = 2 * Math.PI / 60 * minute;
            ctx.rotate(rad);
            ctx.lineWidth = 3;
            ctx.lineCap = &#39;round&#39;;
            ctx.moveTo(0, 10);
            ctx.lineTo(0, -r + 30);
            ctx.stroke();
            ctx.restore();
        }


        //绘制秒针
        function drawSecond(second) {
            ctx.save();
            ctx.beginPath();
            ctx.fillStyle = &#39;red&#39;
            var rad = 2 * Math.PI / 60 * second;
            ctx.rotate(rad);
            ctx.moveTo(-2, 20);
            ctx.lineTo(2, 20);
            ctx.lineTo(1, -r + 18);
            ctx.lineTo(-1, -r + 18);
            ctx.fill();
            ctx.restore();
        }

        //绘制指针的端点
        function drawDot() {
            ctx.beginPath();
            ctx.fillStyle = &#39;white&#39;;
            ctx.arc(0, 0, 3, 0, 2 * Math.PI, false);
            ctx.fill();
        }

        //动起来
        function draw() {
            //清除之前所绘制的
            ctx.clearRect(0, 0, width, height);

            var now = new Date();
            var hour = now.getHours();
            var minute = now.getMinutes();
            var second = now.getSeconds();
            drawBackground();
            drawHour(hour, minute);
            drawMinute(minute);
            drawSecond(second)
            drawDot();
            ctx.restore();
        }
        //draw();

        setInterval(draw, 1000);
    </script>
</body>

</html>

Das obige ist der detaillierte Inhalt vonCodebeispiel für das Zeichnen einer Uhr in Canvas. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:segmentfault.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：So zeichnen Sie mit Canvas einen lächelnden Ausdruck (Codebeispiel)Nächster Artikel：So zeichnen Sie mit Canvas einen lächelnden Ausdruck (Codebeispiel)

In Verbindung stehende Artikel

Mehr sehen