IE8-Kompatibilität mit EaselJS und ExplorerCanvas erhalten

Question

Oct 04, 2012, 11:37 AM

canvas javascript internet-explorer-8 internet-explorer easeljs

IE8-Kompatibilität mit EaselJS und ExplorerCanvas erhalten

Ich verwende EaselJS und möchte die Abwärtskompatibilität mit ExplorerCanvas zulassen.

Dies sollte mit dem folgenden Code möglich sein (sieheHier):

createjs.createCanvas = function () { ... return canvas implementation here ... }

Wenn ich jedoch eine Warnung in diese Funktion einsetze und den Code ausführe, wird die Funktion niemals ausgeführt.

Wie bringe ich das zum Laufen?

Bearbeiten:

Hier ist ein vereinfachtes Beispiel für den Code, den ich verwende:

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8' />
    <script src='/Scripts/jquery-1.7.1.js'></script>
    <script src="/Scripts/excanvas/excanvas.compiled.js"></script>
    <script src="/Scripts/easeljs/lib/easeljs-0.5.0.min.js"></script>
    <script src='/Scripts/core/jquery.mousewheel.js'></script>
    <style>
        canvas
        {
            border: 1px solid #ccc;
        }
    </style>
    <script type='text/javascript'>
        $(document).ready(function () {
            // Variables
            var img;
            var stage;
            var bmp;

            // Bindings
            $('#load').click(function () { initialize() }); // DELETE

            // Functions

            function initialize() {
                img = new Image();
                img.onload = imageLoadedEvent;
                img.src = '/Scripts/viewer/June.jpg';
            }

            function imageLoadedEvent() {
                var canvasElement = generateContext('testCanvas', 400, 400);

                stage = new createjs.Stage('testCanvas');
                bmp = new createjs.Bitmap(img);

                stage.autoClear = true;
                stage.addChild(bmp);
                stage.update();
            }

            function generateContext(canvasID, width, height) {
                var canvasElement = document.createElement('canvas');

                if (typeof (G_vmlCanvasManager) != 'undefined')
                    canvasElement = G_vmlCanvasManager.initElement(canvasElement);

                canvasElement.setAttribute("width", width);
                canvasElement.setAttribute("height", height);
                canvasElement.setAttribute("id", canvasID);

                document.getElementById('viewer').appendChild(canvasElement);
            }
        });
    </script>
</head>
<body>
    <div id='viewer'>
        <button id='load'>load</button>
    </div>

</body>
</html>

Dieses Beispiel wird in Chrome und IE9 ausgeführt, wenn ein natives Canvas-Element erstellt und verwendet wird. In IE8 schlägt dies jedoch fehl.