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 中创建了一个画布元素。

希望这对你有帮助

于 2012-06-23T08:57:56.963 回答