我有一个半透明的形状:
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)';
看起来很平凡,因为半透明的形状可以看到黑暗的阴影。
谢谢!
答案 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()
然后没有阴影,正常画出你的形状。