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事件时会发生这种情况），它会使用您的参数调用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可以解析。由于具有功能开销时间的竞争条件，您当前接受的解决方案可能正常运行。

Chrome 31.0 HTML5 Canvas Draw Image

3 个答案: