基于canvas简单实现时【时间转盘】-白红宇

前几天看见有人实现了抖音很火的【时间转盘】屏保，感觉很有意思，于是就动手用canvas也实现了个，效果图如下：

话不多说上代码

首先，定义个canvas标签，宽高500px，黑色背景


    复制代码

其次，定义语言，我实现的很简单，就是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) // 开启定时器，一秒执行一次复制代码

写在最后

实现的比较简单，不足之处请大家多多指教，最后推荐一个在线的网站，我一直在用