修改 HTML5 Canvas 上透明弧线的渐变透明度答案

【问题标题】：Modifying the transparency of a gradient for a transparent arc on HTML5 Canvas修改 HTML5 Canvas 上透明弧线的渐变透明度
【发布时间】：2011-01-16 23:25:23
【问题描述】：

在这里，我有一个弧形，它使用了两个渐变之一应用了一些透明度：`

ctx.arc(mouseX,mouseY,radius,0, 2*Math.PI,false);
var grd=ctx.createRadialGradient(mouseX,mouseY,0,mouseX,mouseY,brushSize); 
grd.addColorStop(1,"transparent");
grd.addColorStop(0.1,"#1f0000");
ctx.fillStyle=grd;
ctx.fill();

现在有没有办法给整个弧线一些透明度，只影响弧线而不影响画布的其余部分？

谢谢

【问题讨论】：

标签： html canvas transparency

【解决方案1】：

与 SVG 或 HTML 不同，HTML 画布上没有分层或分组。您不能将弧/渐变包裹在另一个不透明度较低的元素中；您必须将不透明度（或着色或其他）更改直接传播到最终属性。

你的颜色#1f0000相当于rgb(31,0,0)；使用 rgba 降低此特定色标的不透明度。

var opacity = 0.55; //55% visible
grd.addColorStop(1,'transparent');
grd.addColorStop(0.1,'rgba(31,0,0,'+opacity+')');

【讨论】：

感谢 Phrogz。这可以解决问题，但我在画画时看到了很多文物。看看这个屏幕：imgur.com/MG5ck 图像不应该缺少那些“块”。知道为什么会这样吗？谢谢
没有看到生成它的代码，我唯一的猜测是 a) 与非完整路径相关的东西，在停止点和终点之间有填充弧线，b) 许多路径创建时没有 beginPath/closePath/moveTo在它们之间，c) 一些特定于实现的画布错误。
它是 b。我将继续对此进行试验，但现在使用实际图像（而不是弧线）在我所做的事情上看起来要好得多。再次感谢。
刚刚发现macOS 10.12上的safari 10.1不支持rgba color stop

【解决方案2】：

您可以使颜色在结尾处停止为 rgba 颜色并以这种方式赋予它透明度。

【讨论】：

你能举个简单的例子吗？谢谢