Странная проблема с Canvas в Internet Explorer 9, есть ли ограничения по ширине и размеру canvas / context? - PullRequest
Новая
       18

Странная проблема с Canvas в Internet Explorer 9, есть ли ограничения по ширине и размеру canvas / context?

4 голосов
/ 01 июля 2011

У меня есть очень простой код, который рисует изображение на большом холсте (2560 * 2560), который отлично работает в FireFox, но в IE изображения не отображаются после определенной ширины и высоты (примерно после 2200).Canvas реагирует на события кликов в этой области.

Проверьте код:

Это ошибка в IE9 или ограничение ширины и размера канва / контекста? 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
</head>
<body>
    <div style="background-color:#000;width:2560px;height:2560px;">
        <canvas id="map" width="2560px" height="2560px"></canvas>
    </div>
</body>
</html>
<script
    src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js" 
    type="text/javascript"></script>
<script>
    $(document).ready(function () {
        var canvas = document.getElementById("map");
        var ctx = canvas.getContext("2d");
        var img = new Image();

        img.onload = function () {
            for (var y = 0; y < 2560; y += 256) {
                for (var x = 0; x < 2560; x += 256) {
                    ctx.drawImage(img, x, y, 256, 256);
                }
            }
            ctx.fillStyle = "rgba(255, 0, 0, 1)";
            ctx.fillRect(2400, 2400, 100, 100);
        };
        img.src = "http://mt1.google.com/vt/lyrs=m@157000000&hl=en&x=9&y=28&z=6&s=Ga";
    });
</script>

1 Ответ

1 голос
/ 01 июля 2011

Кажется, что нет никаких проблем с IE 9.0.8112 в Windows 7.

Это может быть связано с вашим компьютером, слишком мало ресурсов или что-то в этом роде.

Этот пример ниже не работает для вас?

http://jsfiddle.net/5QrVk/6/

Для записи, иметь холст меньшего размера и переводить его, когда вы хотите посмотреть больше, почти всегда хорошая идея. Что ты делаешь, что нуждается в таком большом пространстве?

...