问题描述:

I've got a canvas that works thanks to Google's excanvas in IE. Now I want to blur the thing.

I added a blur filter with the IE propertiary syntax and it blurred the canvas and the text inside a div.

Well... It did work in IE7 and IE9, but not in IE8. [WTF?!]

Hope somebody have seen that before.

I also tried to enable the blur from javascript after drawing on the canvas, but it didn't change anything.

Here's a live example:

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

The example is only the IE code. It won't work in other browsers, but my main code does.

I put an interesting image in the example for you to get amused while you help me. :)

[edit]

Generally blur works in IE8 - I put some text at the bottom of the div in my example page and the text gets blurred.

网友答案:

This is happening because of the 'position:absolute' specified on g_vml_:shape produced by excanvas.js line 597

Why?!...

Because there's a BUG in IE8 that elements with position other than static will not inherit filters of parent element, unless we do that.

To fix this do one of the following options

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
}

Or

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

Take a look at this article. It's a long winded way but may help.

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

More:

  • http://www.pixastic.com/lib/docs/actions/blur/
  • How to draw a blurry circle on HTML5 canvas?
  • Blur show effect - html5 canvas
网友答案:

Because Microsoft dumped 'filter' after IE7 so I'm surprised you say it works in IE9.

相关阅读:
Top