画布上的IE8模糊过滤器

Question

多亏了IE中的谷歌excanvas，我有了一个可以工作的画布。现在我想模糊它。我添加了一个带有IE属性语法的模糊过滤器，它模糊了div中的画布和文本

嗯。。。它在IE7和IE9中确实有效，但在IE8中无效。[WTF？！]

希望有人以前见过。

在画布上绘制后，我还尝试从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]-->

Answer 2

看看这篇文章。这是一种冗长的方式，但可能会有所帮助。

http://aautar.digital-radiation.com/blog/?p=2519

更多：

• http://www.pixastic.com/lib/docs/actions/blur/
• 如何在HTML5画布上绘制模糊的圆圈
• 模糊显示效果-html5画布

Answer 3

因为微软在IE7之后丢弃了"filter"，所以我很惊讶你说它在IE9中有效。