JavaScript Canvas 羽毛弧

Question

我目前正在使用 Canvas 标签绘制弧线，有人问我是否可以羽化(柔化)弧线的边缘。这可能吗？在这里谷歌搜索似乎比它的值(value)更麻烦。

我也尝试过在 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