Chrome 31.0 HTML5 Canvas Draw Image

Question

由于下载了当前版本的chrome（版本31.0.1650.57），我完全无法使用我的代码在HTML5 Canvas中绘制图像; 没有错误，它正在寻找资源，它们只是没有绘制。 我真的很感激这方面的一些帮助！

var grass_img = new Image();
grass_img.src = 'grass.gif';
grass_img.onload = draw_here(grass_img, (center_x + base_x + xpos), (center_y + base_y + ypos),1);

哪个出现在几个不同的图像和调用：

function draw_here(image, x, y, scale){
     draw_canv.drawImage(image, x, y, image.width * scale, image.height * scale);
}

X和Y是正确的，规模也是如此; 调试器没有发现编码错误，程序运行完美，直到最新版本的chrome出现。 降级铬也不是一种选择。

Answer 1

问题出在这一行：

grass_img.onload = draw_here( /* ... */ );

您似乎认为您将函数draw_here指定为onload-handler。 但这不是这一行中真正发生的事情。 你真正做的是立即执行draw_here并将该函数的返回值（ undefined ）分配给grass_img.onload 。

试试这个：

grass_img.onload = function() {
    draw_here(grass_img, (center_x + base_x + xpos), (center_y + base_y + ypos),1);
}

这将创建一个匿名函数，该函数将分配给onload-handler。 当调用该匿名函数时（触发load-event时会发生这种情况），它会使用您的参数调用draw-handler。

Answer 2

我解决了这个问题。 如果你在每次迭代中声明你的图像，似乎最新版本的Chrome不喜欢它。 （它似乎以前允许的东西，但我真的不应该这样做。）如果你在js的顶部声明你的图像及其来源，在任何函数之外，并且只在函数中绘制它们然后问题是解决了，例如：

var image = new Image();
image.src='image.jpg';

someFunction() {
    canvas.drawImage(image,0,0);
}

Answer 3

注意： .src应该始终被称为AFTER .onload 。 否则会出现许多难以追踪的小型车（如此款式）。 特别是如果你的图像加载之前onload可以解析。 由于具有功能开销时序的竞争条件，您当前接受的解决方案可能正常运行。