canvas fillStyle не работает в Internet Explorer - PullRequest
0 голосов
/ 11 марта 2012

Я хочу добавить оттенок цвета к изображению.excanvas не поддерживает getImageData.Я нашел способ подкрасить изображение с прозрачным цветным слоем, но это не работает, т.е.Мой код ниже.Также вы можете проверить на http://jsfiddle.net/salt/Qxu56/

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>HTML5 Canvas Test</title>
        <!--[if IE]>
            <script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script>
        <![endif]-->
        <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <script type="text/javascript">
                var x; //drawing context
                var width;
                var height;
                var fg;
                var buffer

                window.onload = function() {
                    var drawingCanvas = document.getElementById('myDrawing');
                    // Check the element is in the DOM and the browser supports canvas

                    if(drawingCanvas && drawingCanvas.getContext) {
                        // Initaliase a 2-dimensional drawing context
                        if (typeof window.G_vmlCanvasManager!="undefined") { 
                            drawingCanvas=window.G_vmlCanvasManager.initElement(drawingCanvas);
                            var x = drawingCanvas.getContext('2d');
                        }else{
                            var x = drawingCanvas.getContext('2d');
                        };

                       // x = drawingCanvas.getContext('2d');
                        width = x.canvas.width;
                        height = x.canvas.height;

                        // grey box grid for transparency testing
                        x.fillStyle = '#666666';
                        x.fillRect(0,0,width,height);
                        x.fillStyle = '#AAAAAA';
                        var i,j;
                        for (i=0; i<100; i++){
                            for (j=0; j<100; j++){
                                if ((i+j)%2==0){
                                    x.fillRect(20*i,20*j,20,20);
                                }
                            }
                        };

                        // create offscreen buffer, 
                        buffer = document.createElement('canvas');
                        if (typeof window.G_vmlCanvasManager!="undefined") { 
                            G_vmlCanvasManager.initElement(buffer);
                            var bx = buffer.getContext('2d');
                        }else{
                            var bx = buffer.getContext('2d');
                        };

                        fg = new Image();
                        fg.onload = function() {
                            buffer.width = this.width;
                            buffer.height = this.height;

                            // fill offscreen buffer with the tint color
                            bx.fillStyle = '#FFCC00'
                            bx.fillRect(0,0,this.width,this.height);

                            // destination atop makes a result with an alpha channel identical to fg, but with all pixels retaining their original color *as far as I can tell*
                            bx.globalCompositeOperation = "destination-atop";
                            bx.drawImage(fg,0,0);

                            // to tint the image, draw it first
                            x.drawImage(fg,0,0);

                            //then set the global alpha to the amound that you want to tint it, and draw the buffer directly on top of it.
                            x.globalAlpha = 0.5;
                            x.drawImage(buffer,0,0);
                        };
                        fg.src = 'http://upload.wikimedia.org/wikipedia/commons/0/00/WX_circle_white.png';
                    };
                };
        </script>
    </head>
    <body>
        <canvas id="myDrawing" width="770" height="400">
            <p>Your browser doesn't support canvas.</p>
        </canvas>
    </body>
</html>

1 Ответ

0 голосов
/ 30 марта 2012

excanvas и html5shim не совместимы, насколько я тестировал. Я просто заменил прокладку на:

<!--[if lt IE 9]><script type="text/javascript">var e="article,aside,figure,footer,header,hgroup,menu,nav,section".split(",");for(var i=0,l=e.length;i<l;i++){document.createElement(e)};</script><![endif]-->
...