修改HTML5画布上透明弧形渐变的透明度

Question

这里有一条弧线，其中一个渐变色应用了一些透明度:

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

有没有一种方法可以仅影响弧线而不影响画布的其余部分，使整个弧线变得透明？谢谢。

- Rigil

Answer 1

与SVG或HTML不同，HTML Canvas上没有分层或分组功能。您无法将弧线/渐变包含在另一个较低不透明度的元素中; 您必须直接传播不透明度（或着色等）更改到最终属性。

您的颜色#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

---

谢谢Phrogz。这个方法确实有用，但是我在绘制时看到了很多伪像。请看一下这个屏幕截图：http://imgur.com/MG5ck 这张图片不应该有那些“块”缺失。你知道为什么会出现这种情况吗？谢谢。 - Rigil

如果没有看到生成它的代码，我的猜测只能是：a）与填充弧线相关的非完整路径，位于起始点和终止点之间；b）在它们之间创建了许多路径，但没有使用beginPath/closePath/moveTo；c）一些特定于实现的画布错误。 - Phrogz

这是b。我将继续尝试，但现在使用实际图像（而不是弧线）在我所做的事情上看起来更好。再次感谢。 - Rigil

刚刚发现，在macOS 10.12上的Safari 10.1不支持rgba颜色停止。 - Ryan.C

Answer 2

你可以将颜色停止在 rgba 颜色处，并以此方式赋予它透明度。

- Skilldrick

---

你能举个快速的例子吗？谢谢。 - Rigil