只在html5画布上绘制阴影

Question

我正在尝试弄清楚如何在画布上绘制某物并仅显示其阴影，例如：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.shadowBlur=100;
ctx.shadowOffsetX = 150;
ctx.shadowColor="red";
ctx.fillStyle="rgba(0,0,0,0.7)";
ctx.fillRect(20,20,100,80);

我在这里画了一个黑色矩形并添加了带有偏移的红色阴影，我希望只看到阴影而不是矩形。

从示例中可以看到，我尝试使用rgba颜色，但当我设置透明度时，它也会影响阴影。

这是一个关于此代码的fiddle: http://jsfiddle.net/YYvFw/

- Gilad_Gr

Answer 1

我想到的第一件事是将矩形移出画布并将阴影偏移至所需位置。

    var canvas = document.getElementById('myCanvas'),
    context = canvas.getContext('2d'),
    width = 100,
    height = 80,
    posX = 100,
    posY = 80;

    context.rect(-width, -height, width, height);
    context.shadowColor = 'red';
    context.shadowBlur = 40;
    context.shadowOffsetX = width+posX;
    context.shadowOffsetY = height+posY;
    context.fill();

它在 x:100 y:80 处绘制了阴影。

http://jsfiddle.net/S7WRx/2/

- yardarrat

---

这也是我想到的第一件事，但是后来我想到我有多个形状和阴影，画布非常大，所以没有固定的大小可以用来将它移动到外面。 - Gilad_Gr

你可以通过以下代码将整个画布模糊化：#myCanvas {-webkit-filter: blur(5px);}。不过，更好的做法是明确指定你需要从画布中获取什么内容。 - yardarrat

如何模糊画布有什么帮助？它会模糊所有东西，包括阴影... - Gilad_Gr

我不是一个画布专家，但对我来说似乎这是不可能的。画两个形状！一个带有alpha，另一个在画布外部偏移其阴影并将其拉回内部。你还没有给我们足够的信息来提供实际的代码答案。所以我就这样留下了。 - yardarrat

Answer 2

我不知道是否有简单的方法来做到这一点。我能想到的唯一办法是使用getImageData获取阴影区域的数据，然后清除画布并将该imageData粘贴到上面。

- Jonas Grumann

---

但是如果矩形和阴影重叠了呢？ - Gilad_Gr