clearRect與淡入淡出

Question

我畫了一些形狀到我的透明畫布。

大量的動畫圈是精確的。

我想淡化我的畫布的底部邊緣，從透明（但與形狀）完全透明。

編輯

見下面的圖像;這是在半圓形切口用什麼我現在有clearRect()

任何人都有一個想法，我右邊的效果後我，而不是？

Answer 1

您可以使用alpha創建漸變（使用rgba()語法）並將其應用於筆畫。喜歡的東西：

var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d'); 

var gradient = ctx.createLinearGradient(0, 0, 0, canvas.height); 
gradient.addColorStop(0,"#f00"); 
gradient.addColorStop(0.75,"rgba(255, 0, 0, 0)"); 
ctx.strokeStyle = gradient; 

ctx.lineWidth = 10; 
ctx.beginPath(); 
ctx.arc(150, 150, 100, 0, Math.PI * 2); 
ctx.stroke(); 

下面是它一個快速演示：http://codepen.io/codingcampbell/pen/wMeowa

在addColorStop改變0.75值是什麼會影響其中漸變的阿爾法部分來自於動畫可能會非常棘手，我認爲你需要爲每個停止值創建一個新的漸變，因爲你不能修改現有的停止點（但你可以保持這些漸變在內存中，並與你的所有形狀共享它們）

Answer 2

最簡單的方法是製作一個小的垂直漸變並將其作爲橡皮擦應用於整個圓上。爲了使它具有動畫效果，只需在每一幀上向上移動它（並從圓下開始）即可。