Javascript HTML5画布：有没有办法在图像上使用多个阴影？

我想给我的角色增加一些视觉效果。

如您所见，它有多个阴影跟随

我使用以下代码：

context.shadowColor = 'rgba(180,0,0,0.6)';
context.shadowOffsetX = -20;
context.shadowOffsetY = 0;
context.shadowBlur = 3;

context.shadowColor = 'rgba(180,0,0,0.6)';
context.shadowOffsetX = -40;
context.shadowOffsetY = 0;
context.shadowBlur = 3;

context.drawImage(img, x, y, width, height, dx, dy, width, height);

但只有最后一种阴影颜色有效。 有没有办法在画布上使用多个阴影？ 我走对了吗？如果没有，实现这一目标的常见方法是什么？

---

如果您有任何帮助，我们将不胜感激。

您可以在每次绘制图像时使用新的阴影集，但这会变得脏兮兮的，因为您还需要反复绘制原始图像，而且阴影的计算量很大，所以不要这样做

相反，您可以先在屏幕外的画布上计算阴影，然后只在主画布上渲染此画布，您希望在主画布上显示阴影

var img=新图像； img.onload=init； img.src=https://dl.dropboxusercontent.com/s/4e90e48s5vtmfbd/aaa.png; var w，h； var ctx=c.getContext'2d'； ctx.IMAGESMOOTHINGABLED=ctx.MOZIMAGESMOOTHINGABLED=ctx.MSIMAGESMOOTHINGABLED=ctx.WebKITMIMAGESMOOTHINGABLED=false； var shadowCan=c.cloneNode； shadowCtx=shadowCan.getContext'2d'； 函数初始化{ w=shadowCan.width=img.width； h=shadowCan.height=img.height； w*=1.5；//对于演示来说，我的图像有点小 h*=1.5； //一次初始化阴影 shadowCtx.globalCompositeOperation='source over'； shadowCtx.fillStyle=红色； 阴影CTX.fillRect0，0，c.宽度，c.高度； shadowCtx.globalCompositeOperation='destination in'； shadowCtx.drawImageimg，0,0； //现在，图像中的每个不透明像素都是红色的 画 } 函数图{ var maxX=c.宽度-w*2； 对于变量x=0；x非常感谢您的帮助性回复，它对我非常有用！：