4 
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <script src="resources/js/jquery-1.7.2.min.js"> </script>
        ...
        ...
        <script>
            ...
            ...
            function draw(screen, data) {  
                if (screen.document.getElementById("screen") == null){
                    screen.document.write('<div id="screen" style="width:' +
                    data.maxX + '; height:' + data.maxY + '; margin: auto;" >' +
                    '<canvas id="screenCanvas" width=' + data.maxX + ' height=' + 
                    data.maxY + 'style="border:2px solid #000000;color:#000000;" > </canvas></div>');
                }
                var canvas = screen.document.getElementById('screenCanvas');
                var context = canvas.getContext('2d');  
                var tileY = 0;
                var tileX = 0;
                var counter = 0;
                var tileWidth = data.tileWidth;
                var tileHeight = data.tileHeight;
                for (var i=0;i<(data.maxX/data.tileWidth);i++){  
                    for (var j=0;j<(data.maxY/data.tileHeight);j++){  
                        var img = new Image();  
                        img.onload = (function(img, tileX, tileY, tileWidth, tileHeight){
                            return function() {
                                context.drawImage(img,tileX, tileY, tileWidth, tileHeight);
                            }
                        })(img, tileX, tileY, tileWidth, tileHeight);  
                        img.src = "http://myserver:8080/images/screen/tile/" + 
                                   data.tiles[counter].imageId; 
                        tileX = tileX + parseInt(data.tileWidth); 
                        counter ++; 
                     } 
                    tileY = tileY + parseInt(data.tileHeight); 
                    tileX = 0;
                }  
            }
            ...
            ...
        </script>
    </head>
    <body>
        ...
        ...
        ...
        ...
    </body>
</html>

新しいウィンドウを開いて新しいウィンドウにキャンバスを描画するときにこの関数を呼び出します。新しいウィンドウには画像の配列が含まれています。

問題：

1- Internet Explorer 9：キャンバスを描画しますが、画像を描画しませんでした（キャンバスのスタイルで設定した境界線が表示されるため）。

2- IEが画像を取得しようとすると、このエラーが表示されます

SCRIPT5022: Exception thrown and not caught 
index.html, line 1 character 1

3- Opera 12：キャンバスを表示しませんでした。

ノート：

1-この関数は、Firefox、google chrome、およびsafariで正常に機能します。

2- Internet Explorerは互換表示（F12）ではなく、Quirksモード（標準）ではないと確信しています。

何か助けはありますか？

4

3 に答える 3

2

うーん..面白い。このスタックにタグを付けるだけで、同様の問題が発生したと思います。

ページが読み込まれた後、関数が呼び出され、作成済みのキャンバス要素に画像（.png）が読み込まれます。IEの半分の時間、このイメージはロードされません。更新を押す必要があり、最終的に表示されます。FirefoxとChromeでは、最初の試行で機能します。IEでの最初の試行でも機能することもありますが、この不規則性が私を殺しています。

function loadCanvas(dataURL) {
   var canvas = document.getElementById('canvas');
   var ctx = canvas.getContext('2d');
   X_max = parseInt($("#container").css('width'));
   Y_max = parseInt($("#container").css('height'));

   canvas.width = X_max;
   canvas.height = Y_max;

   ctx.fillStyle="white";
   ctx.fillRect(0, 0, X_max, Y_max);


   // load image from data url
   var imageObj = new Image;

   imageObj.onload = function() {
   ctx.drawImage(this, 0, 0);
   };

   imageObj.src = dataURL;
}
于 2013-03-03T13:50:44.733 に答える
1

drawページの読み込み後に関数を呼び出す場合はdocument.write(...)、新しいページが作成され、IEが画像の読み込みハンドラーを完了しないため（少なくともchromeとは異なり）、を置き換える必要があります。

$("body").append('<div id="screen" style="width:' +
                    data.maxX + 'px; height:' + data.maxY + 'px; margin: auto;" >' +
                    '<canvas id="screenCanvas" width=' + data.maxX + ' height=' + 
                    data.maxY + style="border:2px solid #000000;color:#000000;"></canvas</div>')
于 2012-06-23T09:06:29.277 に答える
0 
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <script src="resources/js/jquery-1.7.2.min.js"> </script>
        ...
        ...
        <script>
            ...
            ...
            function draw(screen, data) {  
                var canvas;
                if (screen.document.getElementById("screen") == null){
                    var canvasDiv = screen.document.createElement("div"); 
                    canvasDiv.id = "screen"; 
                    canvasDiv.style.margin = "0px auto";
                    canvasDiv.style.width = data.maxX;
                    canvasDiv.style.height = data.maxY;
                    canvasDiv.style.border='2px solid black';
                    screen.document.body.appendChild(canvasDiv); 

                    canvas = screen.document.createElement('canvas');
                    canvas.setAttribute('width', data.maxX);
                    canvas.setAttribute('height', data.maxY);
                    canvas.setAttribute('id', 'screenCanvas');
                    canvasDiv.appendChild(canvas);
                    if(typeof G_vmlCanvasManager != 'undefined') {
                        canvas = G_vmlCanvasManager.initElement(canvas);
                    }
                }else{
                    canvas = screen.document.getElementById('screenCanvas');
                }

                var context = canvas.getContext('2d');  
                var tileY = 0;
                var tileX = 0;
                var counter = 0;
                var tileWidth = data.tileWidth;
                var tileHeight = data.tileHeight;
                for (var i=0;i<(data.maxX/data.tileWidth);i++){  
                    for (var j=0;j<(data.maxY/data.tileHeight);j++){  
                        var img = new Image();  
                        img.onload = (function(img, tileX, tileY, tileWidth, tileHeight){
                            return function() {
                                context.drawImage(img,tileX, tileY, tileWidth, tileHeight);
                            }
                        })(img, tileX, tileY, tileWidth, tileHeight);  
                        img.src = "http://myserver:8080/images/screen/tile/" + 
                                   data.tiles[counter].imageId; 
                        tileX = tileX + parseInt(data.tileWidth); 
                        counter ++; 
                     } 
                    tileY = tileY + parseInt(data.tileHeight); 
                    tileX = 0;
                }  
            }
            ...
            ...
        </script>
    </head>
    <body>
        ...
        ...
        ...
        ...
    </body>
</html>

参照：www.williammalone.com

IEはcanvasタグの意味を知らないため、マークアップでそれを使用した場合、IEはエラーの前菜を提供します。代わりに、JavaScriptでcanvas要素を作成します。

これがお役に立てば幸いです

于 2012-06-23T08:57:56.963 に答える