JavaScript帆布羽毛弧

Question

我目前正在使用canvas標簽繪制弧，並且詢問是否可以羽化（軟化）弧的邊緣。 這可能嗎？ 在這里進行谷歌搜索和搜索似乎比它值得的麻煩。

我也嘗試過在mdn上查找，但是用於修飾元素的資源似乎很少。

Answer 1

從您鏈接到評論中的圖像來看，您似乎正在嘗試陰影。

如果是這樣，您可以執行以下操作：

使用此代碼：

c.beginPath();
c.arc(33, 33, 22, 0, Math.PI, false);
c.shadowOffsetX = 2;
c.shadowOffsetY = 2;
c.shadowBlur = 5;
c.shadowColor  = 'rgba(0, 0, 0, 0.8)';
c.fillStyle = "red";
c.fill();

示范

或者，也許您正在嘗試這樣做：

c.beginPath();
c.arc(33, 33, 22, 10, Math.PI*2, false);
c.lineWidth = 2;
var gradient = c.createLinearGradient(20, 0, 50, 40);
gradient.addColorStop(0, "white");
gradient.addColorStop(0.5, 'red');
gradient.addColorStop(1, "white");
c.strokeStyle = gradient;
c.stroke();

示范

Answer 2

不幸的是，目前還沒有羽化選項，但是回答了這個問題的人提出了一個小提琴，它可能與您要使用RGBA漸變實現的目標非常接近：

gradient.addColorStop(0,    "rgba("+r+","+g+","+b+",0)");

在這里查看他的jsfiddle： http : //jsfiddle.net/chdh/MmYAt/

但這仍然有點麻煩。 我想為此提交功能請求，但我根本不知道在哪里？