淺談canvas中的拖尾效果

摘要： 引言 很早就想了解以下 canvas 中的拖尾效果（如彗星，煙花等效果）是怎麼實現的，但是一直沒有深入瞭解，正巧在 codepen 上看到一個 demo ，程式碼簡單，效果炫酷，故有此文。 什麼黑科技 在我的想象中，實現這種效果是一定需要一個數組的，用來儲...

引言

什麼黑科技

在我的想象中，實現這種效果是一定需要一個數組的，用來儲存彗星的尾巴的位置，透明度，生命時長等資訊。然後遍歷這個陣列，將這個尾巴畫在 canvas 上。然而，萬萬沒想到，真正的實現卻簡單的不像實力派，不需要

陣列

， 真正起作用來實現拖尾效果的關鍵是位於 clearCanvas 函式下面的三行程式碼：

ctx.fillStyle="rgba(0,0,0,0.2)"
ctx.rect(0,0,w,h);
ctx.fill();

這裡的技巧在於，在重繪製下一幀前，不是呼叫clearRect清除掉上一幀的內容，而是在上一幀基礎上加上一個半透明蒙層，然後繼續畫下一幀。畫的幀數多了，也就有了拖尾效果，拖尾效果的長短，跟蒙層的透明度有關，透明度越小，拖尾越長。如果你看到這裡就明白了，那可以關掉這個頁面了，否則的話就跟我一起來實現一個流星吧。

實現一個流星

效果如下：

See the Pen meteor by imgss

( @imgss ) on CodePen .

如上所述，這個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，本文完