浅谈canvas中的拖尾效果

引言

很早就想了解如下 canvas 中的拖尾效果（如彗星，烟花等效果）是怎么实现的，可是一直没有深刻了解，正巧在 codepen 上看到一个 demo，代码简单，效果炫酷，故有此文。

什么黑科技

在个人想象中，实现这种效果是必定须要一个数组的，用来储存彗星的尾巴的位置，透明度，生命时长等信息。而后遍历这个数组，将这个尾巴画在 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，本文完