基於canvas簡單實現時【時間轉盤】

前幾天看見有人實現了抖音很火的【時間轉盤】屏保，感受頗有意思，因而就動手用canvas也實現了個，效果圖以下：

話很少說上代碼

首先，定義個canvas標籤，寬高500px，黑色背景

<canvas class="clock" width="500" height="500" style="background:#000;"></canvas>
複製代碼

其次，定義語言，我實現的很簡單，就是0--59數字一一對應漢字數字，組成一個對象

最後，就是js邏輯部分：

// 獲取canvas標籤，定義2d環境
    var c = document.querySelector(".clock")
    var context = c.getContext("2d")
    
    // 設置字體大小
    context.font = '8px Arial'
    context.textBaseline = 'middle'
    context.translate(250, 250) // 設置中心點位置

    // 渲染轉盤
    function createNum(obj={}) {
        for(var i = 0; i < (obj.len || 60); i++) {
            var n =i + (obj.start || 0)            
            context.save()
            context.rotate(Math.PI * 2 / (obj.len || 60) * (n - (obj.offset || 0)) )
            obj.offset == n ? setGradient() : setFont()
            context.strokeText(numList[n], (obj.left || 205), 0); 
            context.restore() 
        }

    }

    // 設置默認字體顏色
    function setFont(color = '#fff') {
        context.strokeStyle = color;
        // 還原陰影
        context.shadowOffsetX = 0;
        context.shadowOffsetY = 0;
        context.shadowBlur = 0
        context.shadowColor = color;
    }

    // 設置高亮顏色
    function setGradient() {
        //建立漸變
        var gradient = context.createLinearGradient(0,0,c.width/2,0);
        gradient.addColorStop("0","magenta");
        gradient.addColorStop("0.5","blue");
        gradient.addColorStop("1","red");

        //賦值給fillStyle
        context.strokeStyle=gradient;

        // 設置陰影
        context.shadowOffsetX = 0; // 陰影Y軸偏移
        context.shadowOffsetY = 0; // 陰影X軸偏移
        context.shadowBlur = 50; // 模糊尺寸
        context.shadowColor = 'rgb(255, 0, 222)'; // 顏色
    }

    // 渲染單位
    function setUnit() {
        setGradient()
        context.strokeText(unit.s, 230, 0)
        context.strokeText(unit.m, 185, 0)
        context.strokeText(unit.h, 140, 0)
        context.strokeText(unit.w, 83, 0)
        context.strokeText(unit.d, 68, 0)
        context.strokeText(unit.M, 30, 0)
    }
    
    // 主函數
    function createClock() {
        context.clearRect(-250, -250, 500, 500) // 清空屏幕

        var time = new Date()
        
        setUnit()
        createNum({offset: time.getSeconds()}) // 秒
        createNum({left: 160, offset: time.getMinutes()}) // 分
        createNum({len: 24, left: 115, offset: time.getHours()}) // 時
        createNum({start: 1, len: 7, left: 100, offset: time.getDay()}) // 星期
        createNum({start: 1, len: 31, left: 43, offset: time.getDate()}) // 日
        createNum({start: 1, len: 12, left: 20, offset: time.getMonth() + 1}) // 月


    }

    createClock()

    setInterval(createClock, 1000) // 開啓定時器，一秒執行一次
複製代碼

寫在最後

實現的比較簡單，不足之處請你們多多指教，最後推薦一個在線的canvas API網站，我一直在用