「时光不负，创作不停，本文正在参加[2021年终总结征文大赛](https://juejin.cn/post/7034786723137585188/ "https://juejin.cn/post/7034786723137585188/")」 2021马上结束了，回首一年也不知道自己都干了什么...感觉浪费了很多时间，所以打算利用一些空闲时间，写一写东西记录一下自己的学习过程，不至于回头望时什么都没有留下.. # 技术栈 >[vue3](https://v3.cn.vuejs.org/)、[vite](https://cn.vitejs.dev/guide/)、[canvas](https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API) # 项目搭建 >可以参考 [怎么使用 vite 创建一个 vue3 的项目](https://juejin.cn/post/7040838967922540558) # 实现过程 > 想法： >1.需要画一个简易的星星模样； >大概就是下边这个样子 > >![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/49398b5e76ef4e53b2386a8a2be854ea~tplv-k3u1fbpfcp-zoom-1.image) > >2.在指定区域随机生成n个大小不一的星星； > >3.星星可以移动、闪烁； > >4.当星星移动出区域后消失，并且重新生成一个新的； >在 views 目录下创建一个star文件夹其中创建 index.vue 然后进行第二步，在画布上画出星星（需要使用到canvas的 [ctx.lineTo(x, y)](https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/lineTo)）方法以及 [Class](https://developer.mozilla.org/zh-CN/docs/Glossary/Class) 类 > ``` ``` >效果 > >![1639667543(1).jpg](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b686b3de58bd4f36a5e17eb50ea5aa22~tplv-k3u1fbpfcp-watermark.image?) > 这个时候星星还是固定的位置无论我们画多少个都是同一个位置且大小也是相同的，所以我们需要将每个星星的坐标以及大小值设置为动态，这里使用 [Math.random() ](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/random) 、 [Math.floor()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/floor) 获取。 > 修改 Star 的 init 方法 ``` // 星星初始化方法初始化星星基础数据 init() { // Math.floor() 返回小于或等于一个给定数字的最大整数 this.x = Math.floor(Math.random() * w.value); this.y = Math.floor(Math.random() * h.value); this.start = Math.floor(Math.random() * 10); } ``` >效果 > > >![1639667580(1).jpg](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/20fa634c4ee64c8b8f1f3ba8f9ece53c~tplv-k3u1fbpfcp-watermark.image?) 这个时候简单的星星就画好了，接下来需要让星星闪烁起来，这里改变 start 值就可以达到星星闪烁的效果。（使用 [window.requestAnimationFrame](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame) 执行动画效果） > ``` ``` >效果 > ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/45bc6537ff864176ad40acee210f9081~tplv-k3u1fbpfcp-zoom-1.image) > 这个时候星星可以进行闪烁了，但是位置还是固定的所以我们在更新的时候将星星坐标进行变化。 ``` // 更新星星 constructor() { this.x; this.y; this.xNum; this.yNum; this.start; } // 星星初始化方法初始化星星基础数据 init() { // Math.floor() 返回小于或等于一个给定数字的最大整数 this.x = Math.floor(Math.random() * w.value); this.y = Math.floor(Math.random() * h.value); this.start = Math.floor(Math.random() * 10); this.xNum = Math.random() * 3 - 1.5; this.yNum = Math.random() * 3 - 1.5; } update() { this.x += this.xNum * deltaTime.value * 0.3; this.y += this.yNum * deltaTime.value * 0.3; this.start += 1; this.start %= 5; } ``` >效果 >![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/72baec4a85d443fba1a69b8449040723~tplv-k3u1fbpfcp-zoom-1.image) >接下来需要判断一下星星是否移动出了区域，超出区域后重新生成一个新的星星。 > ``` // 更新星星 update() { this.x += this.xNum * deltaTime.value * 0.3; this.y += this.yNum * deltaTime.value * 0.3; this.start += 1; this.start %= 5; // 当 x 或 y < 0 时或 x > w 或 y < h 时判定星星已经超出了区域 if (this.x < 0 || this.y < 0 || this.x > w.value || this.y > h.value) { this.init(); } } ``` >效果 >![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2e72d200f3834786b19b8fdd9c6ce0f9~tplv-k3u1fbpfcp-zoom-1.image) >到这里，基础功能就实现了，黑色背景属实不好看，后边再抽时间进行一些背景调整吧.... [代码地址](https://github.com/InkDyedGreenClothes/newStar)