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颜色，但是当我设置不透明度时，它也会影响阴影。

这是此代码的小提琴：http://jsfiddle.net/YYvFw/

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/

Answer 2

我不知道是否有一种简单的方法可以做到这一点。我唯一能想到的是为阴影区域设置getImageData，然后清除画布并将该imageData粘贴到它上面。

在html5-canvas上仅绘制阴影

2 个答案: