HTML5画布阴影模糊和水平翻转

HTML5 Canvas ShadowBlur and Flip Horizontal

本文关键字：模糊 水平 翻转 阴影 布阴影 HTML5      更新时间：2023-09-26

我有一个透明的GIF图像，我正在尝试使用HTML5 Canvas复制IE辉光过滤器（不要问）。我可以用shadowblr滤镜在上面的图像"下面"绘制完全相同的图像。

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

上一个代码：

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

HTML5画布代码：

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张图像，所以我们不能提前将它们全部翻转。这必须在运行中完成。）

我最终所做的是为每个图像制作一个小画布，而不是为整个游戏场制作一个大画布。然后，我把小画布放好/翻转一下。

相关文章：