javascript - HTML5 画布：只有外阴影

Question

如果我在画布上绘制一个矩形，并启用阴影，那么也会创建内阴影和外阴影，但我只想要外阴影。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.shadowColor = 'black';
ctx.shadowBlur = 5;

ctx.strokeRect(20,30,150,75);

我找到的唯一方法是ctx.clearRect(20,30,150,75);. 但这并不是我真正想要的，因为我的rect下可能有东西，我不想删除它。

提前致谢，

score 4 · Accepted Answer

您可以获取矩形内的像素，进行绘画并将这些像素放回原处。这样，矩形内的像素不会改变：http: //jsfiddle.net/dkAKE/。

var imgdata = ctx.getImageData(20, 30, 150, 75);
ctx.strokeRect(20, 30, 150, 75);
ctx.putImageData(imgdata, 20, 30);

要保留边框，(21, 31, 148, 73)请用作区域（假设笔划宽度为 1px）。

score 1 · Accepted Answer

您也可以使用.fillRect()代替.strokeRect(). 这将创建一个实心矩形，其内部颜色定义为.fillStyle()

ctx.shadowColor = 'black';
ctx.fillStyle = 'white';
ctx.shadowBlur = 5;
ctx.fillRect(20,30,150,75);

您仍然会遇到覆盖矩形下方的任何内容的问题，因此您仍然需要 pimvdb 的解决方案来解决该问题。

2 回答 2