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

现在有没有办法让整个圆弧具有一定的透明度，只影响圆弧而不影响 Canvas 的其余部分？

谢谢

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