JavaScript Canvas 羽毛弧答案

【问题标题】：JavaScript Canvas Feather ArcJavaScript Canvas 羽毛弧
【发布时间】：2012-11-11 02:16:20
【问题描述】：

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

我也尝试过查看 mdn，但羽化元素的资源似乎很少。

【问题讨论】：

您能否提供您所要求内容的屏幕截图？我认为我知道，但我不想花时间在演示上而离开。
所以我正在寻找与我在互联网上找到的 clearArc 原型一起使用的这些效果。如果有可能，如果它不能完成，它就不是一个交易破坏者。 jma.duq.edu/classes/shepherd/jma260-03-and-04/Photoshop/Toolbox/…
你试过使用 shadowColor/shadowBlur 吗？

标签： javascript html canvas

【解决方案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

【讨论】：

这看起来可以解决问题，不幸的是我现在不能尝试，但我明天会看看，让你知道我的进展情况。
它很接近但并不完全在那里，我非常感谢您投入的时间，我已将其标记为解决方案，因为它足够接近但并不完美，在带有触摸事件的 iPad。我已经放弃了这个想法，但再次感谢。
这仍然是 2020 年最好的方法吗？感谢您的帮助！

【解决方案2】：

不幸的是没有羽毛选项（还），但是有人回答了this question 想出了一个这样的小提琴，它可能非常接近您想要使用 RGBA 渐变实现的效果：

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

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

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

【讨论】：