Canvas で時計を描画するコード例

この記事の内容はCanvasで時計を描画するサンプルコードですので、ある程度の参考価値はありますので、困っている方は参考にしていただければ幸いです。

完全なコード:

nbsp;html>


    <meta>
    <meta>
    <meta>
    <title>Document</title>
    <style>
        div {
            text-align: center;
            margin-top: 250px;
        }
    </style>



    <div>
        <canvas>你的浏览器不支持canvas</canvas>
    </div>

    <script>
        var dom = document.getElementById(&#39;clock&#39;);
        var ctx = dom.getContext(&#39;2d&#39;);
        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 = &#39;18px Arial&#39;;
            ctx.textAlign = &#39;center&#39;;

            ctx.textBaseline = &#39;middle&#39;;

            //小时数字
            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>

以上がCanvas で時計を描画するコード例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。