javascript - Chrome 31.0 HTML5 Canvas 绘制图像

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 发布。降级 chrome 也不是一个选择。

Answer 1

问题出在这一行:

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

您似乎认为将函数draw_here分配为加载处理程序。但这并不是这一行中真正发生的事情。你真正要做的是执行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 的匿名函数。当调用该匿名函数时(触发加载事件时会发生)，它会使用您的参数调用您的绘制处理程序。