HTML5画布:仅外部阴影

时间:2013-01-18 14:38:35

标签: javascript html5 canvas

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

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);。但它并不是我想要的,因为我的矩形下可能有东西,我不想删除它。

提前致谢,

2 个答案:

答案 0 :(得分:3)

你可以获取矩形内的像素,进行绘画并将这些像素放回去。这样,矩形内的像素不会改变: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)。

答案 1 :(得分:1)

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

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

你仍然会遇到覆盖矩形下方的问题,所以你仍然需要pimvdb的解决方案来解决这个问题。