Strange issue with Canvas in Internet Explorer 9, is there any constraint of width and size of canvas/context?
I have a very simple code which draws a image on a large canvas (2560 * 2560), which works perfectly in FireFox but in IE the images are not getting rendered after a particular width and height (approximately after 2200). Canvas does respond to click events in that area.
Check the code:
Is this a bug with IE9, or a design constraint of width and size of canvas/contex开发者_如何学Got?
<!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>
There doesn't seem to be any problem with IE 9.0.8112 on Windows 7.
It may be specific to your computer, too few resources or something.
Is this example below not working for you?
http://jsfiddle.net/5QrVk/6/
For the record, having a smaller canvas and translating it when you want to view more is almost always a good idea. What are you doing that needs such a large space?
加载中,请稍侯......
精彩评论