这是因为第一次图像没有正确加载，所以画布没有绘制任何东西。图像在后台异步加载，因此您的函数无论如何都会继续。
要处理这种情况，请尝试：
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';
}
如果您对画布执行多次绘制操作（例如顶部的图形），则需要考虑该函数立即返回。
对于这些情况，您需要使用回调，因此当图像完成加载时，您可以从onload具有单个额外参数的处理程序：
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';
}
现在您可以创建调用链：
function step1() {
display_map(center0, center1, step2);
}
function step2() {
/// called when step1 has finished
}
