一、前言
之前在学习 Canvas 的时候，看到一个时间分解的粒子动画效果很好， 然后就跟着做了一遍， 发现 Canvas 画图能力真的很强， 然后在这个基础上我增加了很多元素， 让其更加生动漂亮， 后面又增加了一些功能扩展了我的屏保。 先看一下效果， 点击演示
二、演示
夜晚晴天时
白天晴天时
雨天时还没有画。。。 有没有小伙伴可以帮我画一下 PR 一下
三、功能清单如下
1、已完成
- 当前时间粒子动画
- 自定义倒计时时间， 时间到音乐动画提醒
- 调用天气接口，返回当地天气情况
- 背景随天气接口显示不同的环境景色
- 全屏、退出全屏
- 调用一言API，增加每日一句
2、待完成
- 完成雨天场景、季节场景
- 完成重要节日彩蛋
- 完成选择切换背景
- 。。。
四、项目结构
主要逻辑讲解
1、 画小球的粒子效果，主要是计算 在digit.js中 2、 canvas 的背景通过 ctx.createPattern 可以嵌套 canvas
let content = await createBackgroundCanvas();
pattern = ctx.createPattern(content, "repeat");
3、全屏、收起全屏 在screen.js 中 4、倒计时逻辑在 timetip.js 中
五、 链接
六、 总结
本文介绍了我在学习 Canvas 后， 通过突发奇想， 做了一款摸鱼学习小工具， 可以倒计时提醒喝水、番茄时钟， 等等等， 没事儿可以当屏使用，效果还是比较酷炫的
