修改 HTML5 Canvas 上透明弧线的渐变透明度
这里，我有一个弧线，其使用的两个渐变之一应用了一些透明度：`
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();
现在有没有办法给整个弧线一些透明度，只影响弧线，而不影响画布的其余部分？
谢谢
Here I have an arc with some transparency applied to one of the two gradients its using:`
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();
Is there a way to now give the entire arc some transparency affecting only the arc and none of the rest of the canvas?
Thanks
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
与 SVG 或 HTML 不同，HTML Canvas 上没有分层或分组。您不能将弧线/渐变包裹在另一个较低不透明度的元素中；您必须将不透明度（或着色或其他）更改直接传播到最终属性。
您的颜色
#1f0000相当于rgb(31,0,0)；使用 rgba 降低该特定色标的不透明度。Unlike SVG or HTML, there is no layering or grouping on an HTML Canvas. You can't wrap your arc/gradient in another lower-opacity element; you must propagate opacity (or tinting, or whatever) changes down to the end properties directly.
Your color
#1f0000is equivalent torgb(31,0,0); use rgba to lower the opacity of this particular color stop.您可以使颜色在末尾停止为 rgba 颜色，并以这种方式赋予其透明度。
You could make the color stop at the end an rgba color and give it transparency that way.