去年在电影院看过的电影，印象最深刻的，算是电影《你的名字》了，而且被其中的画面深深吸引了，尤其是陨石划过天空的场景，太美啦！所以想着哪天做一个canvas的流星效果。最近刚好看到油管上的一个视频，作者的主页就是陨石坠落的粒子效果为背景，虽然没有《你的名字》中那么写实，但也是很漂亮了，效果大概长这样，附上链接https://codepen.io/christopher4lis/pen/PzONKR

在这个基础上，我做了一些修改，将圆形粒子换成五角星，背景星空无限右移，且随机产生流星。

下面我把制作过程详细讲解一下。

初始设置

生成canvas标签，设置canvas长宽

const canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

更多相关文章

1. Jquery中的事件处理(自动触发事件,禁用按钮,悬停，失焦，滑动效果)
2. html5中点击按钮，改变按钮状态效果样式
3. HTML+CSS实现审核流程步骤效果
4. 关于uoloadify不能显示效果原因(thinkphp5仿百度糯米)
5. extjs4 desktop 实现仿win7效果的桌面窗口预览效果
6. 原生javascript-图片弹窗交互效果
7. 炫酷的手风琴效果
8. AJAX内容更改加上小变化效果
9. JavaScript 利用 async await 实现 sleep 效果

随机推荐

1. android vlc 编译流程
2. android 多点触摸实现图片缩放
3. Android7.0中文文档（API）-- AlphabetIndexe
4. android 单元测试 radio group
5. Android Init Language（android init.rc语
6. 制作android/cordova splash screen
7. Android最好用的播放器ExoPlayer的使用及
8. Android图片的处理类
9. Android资源汇总贴
10. gradle DSL method not found: android()