基于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网站，我一直在用