JavaScript Canvas Feather Arc

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();

Demonstration

或许你正试图这样做：

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();

Demonstration

Answer 2

遗憾的是，还没有羽毛选项，但有人回答this question 提出了这个小提琴，它可能非常接近您想要使用RGBA渐变实现的目标：

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

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

但它仍然有点麻烦。我想提交一个功能请求，但我根本不知道在哪里？