在HTML5 Canvas上修改透明弧的渐变透明度

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

现在是否有办法让整个圆弧有一些透明度只影响弧线而不影响画布的其余部分？

由于

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+')');

Answer 2

你可以让颜色在结尾处停留一个rgba颜色并以这种方式给它透明。