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

时间:2010-09-02 00:55:28

标签: canvas transparency glow

我有一个半透明的形状:

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)';
看起来很平凡,因为半透明的形状可以看到黑暗的阴影。

谢谢!

1 个答案:

答案 0 :(得分:2)

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

此处有关于创建倒置剪辑区域的说明: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()

然后没有阴影,正常画出你的形状。