Chrome 31.0 HTML5 画布绘制图像答案

【问题标题】：Chrome 31.0 HTML5 Canvas Draw ImageChrome 31.0 HTML5 画布绘制图像
【发布时间】：2014-03-07 13:00:34
【问题描述】：

自从下载当前版本的 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 出现。降级 chrome 也不是一种选择。

【问题讨论】：

31 似乎有一些绘图问题。我想知道除了等待之外是否还有其他事情要做......
啊哈这是一个已知的错误吗？那我就不用太恐慌了。无论如何，我会继续寻找简单的修复方法
OOps，因为您说“它工作得很好”，我只是忽略了，但@Philipp 的答案绝对是正确的。这完全是关于在使用资源之前等待资源加载的老问题。

标签： javascript html google-chrome canvas html5-canvas

【解决方案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 的匿名函数。当调用该匿名函数时（这将在触发加载事件时发生），它会使用您的参数调用您的绘图处理程序。

【讨论】：

这还没有解决图片不显示的问题——确实是对代码进行了改进，但是并没有解决这个只有新版chrome才会出现的问题
@Gargleyark 你可以尝试在 jsfiddle 上提供一个SSCCE 并打开一个新问题吗？

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

注意：.src 应始终称为 AFTER .onload。否则会出现很多难以追踪的越野车（比如这个）。特别是如果您的图像在 onload 之前加载可以被解析。由于具有函数开销计时的竞争条件，您当前接受的解决方案可能是有效的。

【讨论】：