Canvas如何繪制出時(shí)鐘

這篇文章給大家分享的是有關(guān)Canvas如何繪制出時(shí)鐘的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)建站是一家專注于成都網(wǎng)站制作、做網(wǎng)站與策劃設(shè)計(jì),昆明網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)建站做網(wǎng)站,專注于網(wǎng)站建設(shè)十載,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:昆明等地區(qū)。昆明做網(wǎng)站價(jià)格咨詢:18980820575

完整代碼：

<!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';

            //小時(shí)數(shù)字
            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 = '#000';
                    ctx.arc(x, y, 2, 0, 2 * Math.PI, false);
                } else {
                    ctx.fillStyle = '#ccc';
                    ctx.arc(x, y, 2, 0, 2 * Math.PI, false);
                }

                ctx.fill();
            }

        }



        //繪制時(shí)針
        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 = 'round';
            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 = 'round';
            ctx.moveTo(0, 10);
            ctx.lineTo(0, -r + 30);
            ctx.stroke();
            ctx.restore();
        }


        //繪制秒針
        function drawSecond(second) {
            ctx.save();
            ctx.beginPath();
            ctx.fillStyle = 'red'
            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();
        }

        //繪制指針的端點(diǎn)
        function drawDot() {
            ctx.beginPath();
            ctx.fillStyle = 'white';
            ctx.arc(0, 0, 3, 0, 2 * Math.PI, false);
            ctx.fill();
        }

        //動(dòng)起來
        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>

感謝各位的閱讀！關(guān)于Canvas如何繪制出時(shí)鐘就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

新聞標(biāo)題：Canvas如何繪制出時(shí)鐘
標(biāo)題鏈接：http://muchs.cn/article18/jiogdp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、軟件開發(fā)、網(wǎng)站營銷、企業(yè)網(wǎng)站制作、微信公眾號(hào)、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都app開發(fā)公司