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