canvas實現時鐘

時間 2019-12-05

標籤 canvas 實現時鐘简体版

原文原文鏈接

最近在看新浪體育網球頻道（http://sports.sina.com.cn/tennis/）的時候，看到了下面的勞力士廣告的時鐘是用canvas作的，因而也實現了一個簡單的canvas時鐘。直接上代碼：javascript

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>clock</title>
</head>

<body>
    <canvas id="clock" width="500" height="700"></canvas>
    <script type="text/javascript" src="js/clock.js"></script>
</body>

</html>

//時鐘
function clock(canvas) {
    this.canvas = canvas;
    this.ctx = canvas.getContext('2d');
    this.clear = function() {
        var ctx = this.ctx;
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
    }

    //初始化調用
    this.init = function() {
            //圖片加載
            var clockImage = new Image();
            var that = this;
            clockImage.src = './images/clock.png';
            clockImage.onload = function() {
                setInterval(function() {
                    that.drawClock(clockImage);
                }, 1000)
            }
        }
        //畫時鐘
    this.drawClock = function(img) {
            this.clear();
            this.drawClockBg(img);
            this.drawTime();
        }
        //畫時鐘背景
    this.drawClockBg = function(img) {
        var ctx = this.ctx;
        ctx.drawImage(img, 0, 0, 500, 500);
        ctx.save();
        //轉到原點
        ctx.translate(500 / 2, 500 / 2);
        //畫數字
        var clockRadius = 250;
        ctx.font = '36px Arial';
        ctx.fillStyle = '#000';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        for (var n = 1; n <= 12; n++) {
            var theta = (n - 3) * (Math.PI * 2) / 12;
            var x = clockRadius * 0.7 * Math.cos(theta);
            var y = clockRadius * 0.7 * Math.sin(theta);
            ctx.fillText(n, x, y);
        }
        ctx.restore();
    }

    //畫時間
    this.drawTime = function() {
        // 獲取時間
        var date = new Date();
        var hours = date.getHours();
        var minutes = date.getMinutes();
        var seconds = date.getSeconds();
        var temhours = hours > 12 ? hours - 12 : hours;
        var hour = temhours + minutes / 60;
        var minute = minutes + seconds / 60;
        var ctx = this.ctx;
        var clockRadius = 250;

        ctx.save();
        ctx.fillStyle = '#000';
        //從新轉到時鐘原點
        ctx.translate(500 / 2, 500 / 2);

        //畫時針
        ctx.save();
        //計算出線轉動的角度
        var theta = (hour - 3) * 2 * Math.PI / 12;
        ctx.rotate(theta);
        ctx.beginPath();
        //經過畫線劃出時針
        ctx.moveTo(-15, -5);
        ctx.lineTo(-15, 5);
        ctx.lineTo(clockRadius * 0.5, 1);
        ctx.lineTo(clockRadius * 0.5, -1);
        ctx.fill();
        ctx.restore();

        // 畫分針
        ctx.save();
        var theta = (minute - 15) * 2 * Math.PI / 60;
        ctx.rotate(theta);
        ctx.beginPath();
        ctx.moveTo(-15, -4);
        ctx.lineTo(-15, 4);
        ctx.lineTo(clockRadius * 0.8, 1);
        ctx.lineTo(clockRadius * 0.8, -1);
        ctx.fill();
        ctx.restore();

        // 畫秒針
        ctx.save();
        var theta = (seconds - 15) * 2 * Math.PI / 60;
        ctx.rotate(theta);
        ctx.beginPath();
        ctx.moveTo(-15, -3);
        ctx.lineTo(-15, 3);
        ctx.lineTo(clockRadius * 0.9, 1);
        ctx.lineTo(clockRadius * 0.9, -1);
        ctx.fillStyle = '#0f0';
        ctx.fill();
        ctx.restore();

        ctx.restore();
        //畫當前時間
        ctx.font = "60px impact";
        ctx.fillStyle = '#960';
        ctx.textAlign = 'center';
        ctx.fillText((hours > 9 ? hours : '0' + hours) + ':' + (minutes > 9 ? minutes : '0' + minutes) + ':' + (seconds > 9 ? seconds : '0' + seconds), 250, 600);
    }
}


window.addEventListener('load', function() {
    canvas = document.getElementById('clock');
    new clock(canvas).init();
});

這裏的實現仍是比較簡單的。利用Date對象，獲取當前的時間，而後畫出當前時間點的鐘表狀態，最後用setInternval，每秒鐘清除畫布，從新再畫一下一個鐘錶。裏面用到的canvasAPI就不細說了，感興趣的能夠去了解一下canvas的API,它提供了不少強大的功能。html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。