HTML5 Canvas ShadowBlur和水平翻转

我有一个透明的GIF图像，我试图使用HTML5 Canvas复制IE辉光滤镜（不要问）。我可以通过在shadowBlur过滤器顶部的图像“底下”绘制完全相同的图像来完成此操作。HTML5 Canvas ShadowBlur和水平翻转

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

以前的代码：

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);

所以，基本上，我们可以翻转图像或shadowBlur，但不能同时使用。这在所有浏览器中都有。任何方式来做到这一点？以某种方式预渲染翻转的图像并使用它？

（有图片1000，所以我们无法让他们所有的时间提前。它必须在飞行中完成的。）

来源

2012-02-03 PRMan

我最终什么事做的是让每一个微小的帆布而不是一个大的整个赛场。然后我定位/翻转小帆布。

来源

2012-02-04 20:59:58 PRMan

HTML5 Canvas ShadowBlur和水平翻转

回答

相关问题