使用画布可以在半透明形状上创建发光效果吗？

发布于 2024-09-17 19:54:51 字数 429 浏览 7 评论 0原文

我有一个半透明的形状：

ctx.fillStyle = "rgba(255, 255, 255, 0.5)";
ctx.beginPath();  
ctx.moveTo(0, 150);  
ctx.lineTo(300, 0);  
ctx.lineTo(300, 450);
ctx.lineTo(50, 500);
ctx.closePath();
ctx.fill();

我想添加一点阴影，但我希望它只出现在形状之外，我想更多的是发光而不是阴影。有没有办法在画布上做到这一点，就像我的尝试一样：

ctx.shadowBlur    = 5;
ctx.shadowColor   = 'rgba(0, 0, 0, 0.25)';

看起来很普通，因为通过半透明形状可以看到暗影。

谢谢！

原文

I have a semi-transparent shape:

ctx.fillStyle = "rgba(255, 255, 255, 0.5)";
ctx.beginPath();  
ctx.moveTo(0, 150);  
ctx.lineTo(300, 0);  
ctx.lineTo(300, 450);
ctx.lineTo(50, 500);
ctx.closePath();
ctx.fill();

I want to add a bit of shadow, but I want it to only appear outside of the shape, I guess more of a glow than a shadow. Is there a way to do this in canvas as my attempts with:

ctx.shadowBlur    = 5;
ctx.shadowColor   = 'rgba(0, 0, 0, 0.25)';

look fairy ordinary as the dark shadow is visible through the semi-transparent shape.

Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

泪之魂 2024-09-24 19:54:51

我认为最简单的方法是创建一个剪切区域，其中包含形状之外的所有内容，然后在那里绘制阴影。

这里有创建反向剪辑区域的描述： forums.whatwg.org 。

基本上，对于您来说，步骤是：

ctx.save();  // store initial clip region

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(0, canvas.width);
ctx.lineTo(canvas.height, canvas.width);
ctx.lineTo(canvas.height, 0);
ctx.lineTo(0, 0);
// {subpath of your shape here}
ctx.clip()

然后启用阴影并绘制形状。

恢复初始剪辑区域：

ctx.restore()

然后在没有阴影的情况下，正常绘制形状。

I think the easiest way to do this is create a clipping region that includes everything outside the shape and then draw the shadow there.

There is a description of creating inverted clip regions here: forums.whatwg.org.

Basically, for you the steps would be:

ctx.save();  // store initial clip region

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(0, canvas.width);
ctx.lineTo(canvas.height, canvas.width);
ctx.lineTo(canvas.height, 0);
ctx.lineTo(0, 0);
// {subpath of your shape here}
ctx.clip()

Then enable shadows and draw your shape.

Restore the initial clip region: