Question

我正在使用drawImage在画布中加载png和jpeg图像，但它并不总是有效，即使使用相同的图像也是如此。没有例外，没有错误，它只是不起作用。

  {
  debug("lbase starting");

  var canvas = document.getElementById("base");
  debug(canvas);
  ctx = canvas.getContext("2d");
  debug(ctx);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  var baseimg = new Image();
  debug(baseimg);
  baseimg.src = "baseimage.png";
  debug(baseimg.src);
  ctx.drawImage(baseimg, 0, 0);
  debug("base loading done");
  }

我的调试功能只是在页面底部的div中写一条消息。我也尝试过：

  retcode ctx.drawImage(baseimg, 0, 0);
  debug(retcode)

但它返回undefined。

所有内容都被执行（我得到了所有正确的调试消息），但有时它可以正常工作，有时则不然。它似乎在ff然后铬中失败了。

无论如何都要验证drawImage是否有效？知道发生了什么事吗？

感谢。

Answer 1

在完成加载之前，您无法将图像添加到画布。

这样的事情应该有效：

var baseimg = new Image();

baseimg.src = "baseimage.png";

baseimg.onload = function() {

    ctx.drawImage(baseimg, 0, 0);
};

画布并不总是加载

1 个答案: