JavaScript實現iphone時鐘

時間 2019-11-07

標籤 javascript 實現 iphone 時鐘欄目 JavaScript 简体版

原文原文鏈接

各位博友請看效果
html

但願廣大博友推薦一波gif製圖軟件，我用的是迅捷（帶水印）html5

1.設計思路

1.1.設置背景
1.2.繪製錶盤
1.3.繪製阿拉伯數字
1.4.繪製時、分、秒針
1.5.設置時分秒的角度
1.6.設置定時渲染web

2.請看代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            padding: 0;
            margin: 0;
            background-color: rgba(0, 0, 0, 1);
        }

        canvas {
            background-color: rgba(255, 255, 255, 1);
            display: block;
            margin: 10px auto;
        }
    </style>
</head>
<body>
<canvas id="clock" width="600" height="600">當前瀏覽器不支持Canvas</canvas>
<script>
    (function(){
        let canvas = document.querySelector("#clock");
        let ctx = canvas.getContext("2d");
        existRequestAnimationFrame();
        draw(ctx);
    })();
    function existRequestAnimationFrame(){
        var vendors = ['webkit', 'moz'];
        for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
            var vp = vendors[i];
            window.requestAnimationFrame = window[vp+'RequestAnimationFrame'];
        }
        if(!window.requestAnimationFrame){
            var lastTime = 0;
            window.requestAnimationFrame = function(callback){
                var now = new Date().getTime();
                var nextTime = Math.max(lastTime + 16, now);//瀏覽器渲染的間隔時間大約16ms
                return window.setTimeout(function(){
                    callback(lastTime = nextTime);
                },nextTime - now);
            };
        }
    }
    function draw(ctx){
        requestAnimationFrame(function step(){
            drawDial(ctx); //繪製錶盤
            drawAllHands(ctx); //繪製時分秒針
            requestAnimationFrame(step);
        });
    }
    /*繪製時分秒針*/
    function drawAllHands(ctx){
        let time = new Date();
        let s = time.getSeconds(),m = time.getMinutes(),h = time.getHours();
        let pi = Math.PI;
        let secondAngle = pi / 180 * 6 * s + time.getMilliseconds()*pi*6/1000/180;  //計算出來s針的弧度
        let minuteAngle = pi / 180 * 6 * m + secondAngle / 60;  //計算出來分針的弧度
        let hourAngle = pi / 180 * 30 * h + minuteAngle / 12;  //計算出來時針的弧度
        drawHand(hourAngle, 90, 6, "NavyBlue", ctx);  //繪製時針
        drawHand(minuteAngle, 146, 4, "black", ctx);  //繪製分針
        drawHand(secondAngle, 248, 2, "red", ctx);  //繪製秒針
    }
    /* 繪製時針、或分針、或秒針
     * 參數1：要繪製的針的角度
     * 參數2：要繪製的針的長度
     * 參數3：要繪製的針的寬度
     * 參數4：要繪製的針的顏色
     * 參數4：ctx
     * */
    function drawHand(angle, len, width, color, ctx){
        ctx.save();
        ctx.translate(300, 300); //把座標軸的遠點平移到原來的中心
        ctx.rotate(-Math.PI / 2 + angle);  //旋轉座標軸。 x軸就是針的角度
        ctx.beginPath();
        ctx.moveTo(-4, 0);
        ctx.lineTo(len, 0);  // 沿着x軸繪製針
        ctx.lineWidth = width;
        ctx.strokeStyle = color;
        ctx.lineCap = "round";
        ctx.stroke();
        ctx.closePath();
        ctx.restore();
    }
    /*繪製錶盤*/
    function drawDial(ctx){
        let pi = Math.PI;
        ctx.clearRect(0, 0, 600, 600); //清除全部內容
        ctx.save();

        //設置canvas四邊角弧度區域爲背景色
        ctx.translate(0, 0);
        ctx.beginPath();
        ctx.fillStyle = 'rgba(0, 0, 0, 1)';
        ctx.fillRect(0,0,600,600);
        ctx.fill();
        ctx.translate(300, 300);
        ctx.beginPath();
        ctx.arc(0, 0, 300, 0, 2 * pi); //繪製圓周
        ctx.fillStyle = 'rgb(255,255,255)';
        ctx.fill();
        ctx.stroke();
        ctx.closePath();
        //繪製數字
        for (let i = 0; i < 12; i++){
            let deg = -pi / 2 + i * pi / 6 + pi / 180 * 30,//旋轉的角度
                text = (i+1)+'';//數值
            ctx.save();
            ctx.beginPath();
            ctx.font = '27px Microsoft Yahei';
            ctx.fillStyle = 'rgb(0,0,0)';
            ctx.fillText(text, 250*Math.cos(deg) - 6, 250*Math.sin(deg) + 7);
            ctx.restore();
        }
        ctx.restore();
    }
</script>
</body>
</html>

3.參考資料

w3school
菜鳥教程
 CSDNcanvas

相關標籤/搜索

每日一句

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