javascript - Canvas 上的 IE8 模糊滤镜

Question

借助 Google 在 IE 中的 excanvas，我有了一个可以正常工作的 Canvas 。现在我想模糊这件事。 我使用 IE 属性语法添加了一个模糊过滤器，它模糊了 Canvas 和 div 内的文本。

嗯...它确实在 IE7 和 IE9 中有效，但在 IE8 中不行。 [什么鬼？!]

希望有人以前见过这个。

我还尝试在 Canvas 上绘图后启用 JavaScript 的模糊，但它没有改变任何东西。

这是一个实例:

http://jsfiddle.net/rd9q5/1/embedded/result/

示例仅为 IE 代码。它在其他浏览器中不起作用，但我的主代码可以。

我在示例中放置了一张有趣的图片，以便您在帮助我时感到有趣。 :)

[编辑]

通常模糊在 IE8 中有效 - 我在示例页面的 div 底部放置了一些文本，文本变得模糊。

Answer 1

发生这种情况是因为 excanvas.js 第 597 行生成的 g_vml_:shape 上指定了“position:absolute”

为什么？!...

因为IE8中有一个BUG，除了static之外的位置的元素不会继承父元素的过滤器，除非我们这样做。

要解决此问题，请执行以下选项之一

function go() {
    var browser = navigator.userAgent.toLowerCase().match(/(msie) ([\w.]+)/);
    if(document.styleSheets['ex_canvas_'] && browser && browser[2].slice(0,1) == '8'){
        var stylesheet = document.createStyleSheet();
        stylesheet.owningElement.id = 'ex_canvas_';
        stylesheet.cssText = '#cp *{filter:inherit;}';
    }
    // codes for draw
}

或者

<!--[if IE 8]>
    <style type="text/css">
         #cp *{
             filter:inherit;
         }
    </style>
<![endif]-->