很早就想了解以下 canvas 中的拖尾效果 (如彗星, 烟花等效果) 是怎么实现的, 但是一直没有深入了解, 正巧在 codepen 上看到一个 demo https://codepen.io/Tibixx/pen/LXEBGB , 代码简单, 效果炫酷, 故有此文.
什么黑科技
在我的想象中, 实现这种效果是一定需要一个数组的, 用来储存彗星的尾巴的位置, 透明度, 生命时长等信息. 然后遍历这个数组, 将这个尾巴画在 canvas 上. 然而, 万万没想到, 真正的实现却简单的不像实力派, 不需要 数组, 真正起作用来实现拖尾效果的关键是位于 clearCanvas 函数下面的三行代码:
- ctx.fillStyle="rgba(0,0,0,0.2)"
- ctx.rect(0,0,w,h);
- ctx.fill();
这里的技巧在于, 在重绘制下一帧前, 不是调用 clearRect 清除掉上一帧的内容, 而是在上一帧基础上加上一个半透明蒙层, 然后继续画下一帧. 画的帧数多了, 也就有了拖尾效果, 拖尾效果的长短, 跟蒙层的透明度有关, 透明度越小, 拖尾越长. 如果你看到这里就明白了, 那可以关掉这个页面了, 否则的话就跟我一起来实现一个流星吧.
实现一个流星
效果如下:
如上所述, 这个 demo 也是在绘制完一帧后, 绘制下一帧之前, 添加一层半透明蒙层, 最终形成拖尾的效果
- function draw() {
- // 绘制流星
- for(let star of stars){
- star.draw()
- star.move()
- }
- // 这里在不断加半透明蒙层, 使上一帧的流星变淡
- ctx.fillStyle = 'rgba(0,0,0,0.1)'
- ctx.rect(0,0,800,600)
- ctx.fill()
- requestAnimationFrame(draw)
- }
全部代码见 codepen, 本文完
来源: https://www.cnblogs.com/imgss/p/10387222.html