HTML5 Canvas ShadowBlur和Flip Horizo​​ntal

Question

我有一个透明的GIF图像，我正在尝试使用HTML5 Canvas复制IE发光滤镜（不要问）。我可以通过使用shadowBlur过滤器在顶部的图像“下面”绘制完全相同的图像来实现。

问题是图像有时必须水平翻转，如果图像被翻转，shadowBlur不会触发（在img标签下仍然不可见，因为它的尺寸完全相同）。

上一个代码：

if (flipped)
  AddFilter('progid:DXImageTransform.Microsoft.BasicImage(mirror=1,rotation=0)');
AddFilter('progid:DXImageTransform.Microsoft.Glow(Color=" + glowColor + ",Strength=" + glowRank + ")"');

HTML5 Canvas代码：

context.shadowBlur = glowRank * 2;  // Canvas not as strong
context.shadowColor = glowColor;

if (flipped) {
  context.translate(img[0].width, 0);
  context.scale(-1, 1);
}

context.drawImage(img[0], img.position().left - 8, img.position().top - 8, img[0].width, img[0].height);

所以，基本上，我们可以翻转图像或阴影，但不是两者。这适用于所有浏览器。有办法做到这两点吗？以某种方式预渲染翻转图像并使用它？

（并且有1000张图像，所以我们不能提前翻转它们。必须在飞行中完成。）

Answer 1

我最终做的是为每张图片制作一个小画布，而不是整个游戏区的一张大画布。然后我定位/翻转了小画布。