Javascript使用回调将图像绘制到画布

我想我也遇到了类似的问题，但我想了解如何使用回调函数以及如何针对我的特殊情况实现回调函数。我试图让图像“按需”绘制到画布上，即在调用某个函数时。图像与我称之为块的对象相关联。块具有尺寸、坐标和url

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

function Block(x, y, width, height, url) {
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
        this.url = url;
        this.drawBlock = drawBlock;
        function drawBlock() {
              var blockSprite = new Image();
              blockSprite.src = url;
              blockSprite.onload = context.drawImage(blockSprite,x,y,width,height);
        }
  }

你可以看到一个演示。奇怪的是，如果我链接到web上的图像，它就可以工作，但是如果我链接到磁盘上的图像，它就会失败。我相信这是因为onload事件发生在调用drawBlock之前，我需要使用回调或承诺来修复这个问题，但是我对Javascript非常陌生，所以我想在这里得到一些指导。任何帮助或建议都将不胜感激。

请尝试以下方法：

function Block(x, y, width, height, url) {
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
        this.url = url;
        this.drawBlock=function drawBlock(){
              var blockSprite = new Image();
              blockSprite.src = url;
              blockSprite.onload = function(){
                  context.drawImage(blockSprite,x,y,width,height);
              }
        }
  }

var block=new Block(0,0,32,32,"house32x32.png");
block.drawBlock();

回调只是一个稍后执行的函数，通常在长时间运行的任务最终完成后执行

加载图像就是一个很好的例子。考虑这个代码：

function someCallbackFunction(){
    alert("The image has finally been fully loaded");
}

var image=new Image();

image.onload=someCallbackFunction;

image.src="yourImage.png";

alert("This code is last, but will execute before the onload function");

它实际上将按以下顺序执行：

将创建图像对象

var image=新图像（）

图像对象被告知，当它完全加载完图像后，应该执行名为someCallbackFunction的函数

image.onload=someCallbackFunction

为图像提供一个.src URL，并开始下载图像的漫长过程

image.src=“yourmage.png”

image.src=“yourmage.png”之后的任何代码都将执行

…稍后…图像完全加载后，图像对象将执行someCallbackFunction（），并发出警报

---

尝试用

window.onload=function（）{}包围代码@JamesBrown事实上，我所有的代码都已经有了。一旦准备好了，我就把一些东西画到画布上，这部分很好。谢谢！我刚试过，只有一个小问题。因为这是一个2d游戏，我每秒调用drawBlock（）大约30次，这会导致块闪烁。这是因为它正在为每一帧重新加载图像，你知道最好的修复方法是什么吗？是的，你的图像每秒被重新加载30次。看看这个重新编码，它在创建块时开始加载图像，然后在调用Block.drawBlock时绘制图像：