画布上的 IE8 模糊滤镜

Question

感谢 Google 在 IE 中的 excanvas，我有了一个可以使用的画布。现在我想模糊这件事。 我使用 IE 属性语法添加了一个模糊过滤器，它模糊了画布和 div 内的文本。

嗯...它确实可以在 IE7 和 IE9 中运行，但在 IE8 中不行。 [WTF？！]

希望有人以前见过这个。

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

这是一个实例：

http://jsfiddle.net/rd9q5/1/embedded/result/< /a>

示例仅为 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< /a>

更多：

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

Answer 3

因为微软在 IE7 之后放弃了“过滤器”，所以我很惊讶你说它可以在 IE9 中工作。