淺談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，本文完