直到第二次尝试才显示画布图像 [英] Canvas image not displaying until second attempt
问题描述
我正在尝试使用该元素绘制一个静态的Google Maps图像，一旦用户单击提交按钮，该图像就会显示在屏幕上。 html看起来像这样：
I'm trying to use the element to draw a static Google Maps image that comes onscreen once a user clicks on a submit button. The html looks like this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=MYKEY&sensor=true">
</script>
<script type="text/javascript" src="createmap.js">
</script>
</head>
<body>
<form onsubmit="display_map(34.1,-76.08168); return false;">
<input type="submit" value="Submit"/>
</form>
<canvas id='map-canvas' />
</body>
</html>
然后在createmap.js中使用display_map（）函数：
And the display_map() function in createmap.js:
function display_map(center0, center1) {
var image = new Image();
image.src = 'http://maps.googleapis.com/maps/api/staticmap?center='
+ center0 + ',' + center1 + '&zoom=13&size=800x800&sensor=false';
var canvas = document.getElementById('map-canvas');
var context = canvas.getContext('2d');
context.drawImage(image, 0, 0);
}
用户第一次单击提交按钮时，没有任何反应。但是，每次随后的单击都会加载图像（即使关闭选项卡然后重新打开）。更改 center0 和 center1 参数将重置页面，并再次强制单击两次以显示Google生成的新图像。这种现象似乎并非来自Google地图，因为从硬盘驱动器加载图像时也会发生相同的问题。在我测试过的每个浏览器（Firefox，IE和Chrome）中都会发生这种情况。
The first time that the user clicks on the submit button, nothing happens. Every subsequent click, however, will load the image (even if the tab is closed and then reopened). Changing the center0 and center1 arguments will reset the page and again force two clicks to display the new image that Google generates. This behavior doesn't seem to be coming from Google Maps, as the same issue occurs when I load an image from my hard drive. This is happening in every browser I've tested (Firefox, IE and Chrome).
推荐答案
这是因为图像是第一次未正确加载，因此画布不会绘制任何内容。图像在后台异步加载，因此无论您执行什么操作，都将继续执行。
It's because the first time the image hasn't loaded properly so the canvas doesn't draw anything. The image loads asynchronous in the background so your function will continue regardless.
要处理此情况，请尝试：
To handle this scenario try with:
function display_map(center0, center1) {
var image = new Image();
image.onload = function() {
var canvas = document.getElementById('map-canvas');
var context = canvas.getContext('2d');
context.drawImage(this, 0, 0);
}
image.src = 'http://maps.googleapis.com/maps/api/staticmap?center='
+ center0 + ',' + center1 + '&zoom=13&size=800x800&sensor=false';
}
该函数立即返回是需要考虑的情况您需要在画布上执行一些绘制操作（例如，在图形上方）。
That the function returns immediately is something that needs to be taken into account in case you do several draw operations to canvas (graphics on top for instance).
在这种情况下，您需要使用回调，因此当图像加载完成时，您可以调用下一步从 onload 处理程序中，使用单个附加参数即可：
For these cases you need to use callbacks so when an image has finished loading you call the next step from within the onload handler with a single extra parameter:
function display_map(center0, center1, callback) {
var image = new Image();
image.onload = function() {
var canvas = document.getElementById('map-canvas');
var context = canvas.getContext('2d');
context.drawImage(this, 0, 0);
callback();
}
image.src = 'http://maps.googleapis.com/maps/api/staticmap?center='
+ center0 + ',' + center1 + '&zoom=13&size=800x800&sensor=false';
}
现在您可以创建呼叫链：
Now you can create a call chain:
function step1() {
display_map(center0, center1, step2);
}
function step2() {
/// called when step1 has finished
}
这篇关于直到第二次尝试才显示画布图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
