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

Question

我想我遇到了与this question 类似的问题，但我希望在了解如何使用回调函数以及如何针对我的特定情况下实现它的一些帮助。我正在尝试将图像“按需”绘制到画布上，即任何时候调用某个函数。该图像与我称为块的对象相关联。块具有尺寸、坐标和 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);
        }
  }

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

Answer 1

试试这个方法：

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");

它实际上会按照这个顺序执行：

1. 图像对象已创建。

   var image=new Image();

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

   image.onload=someCallbackFunction

3. 图像被赋予一个 .src URL 并开始下载图像的漫长过程

   image.src="yourImage.png";

4. image.src="yourImage.png" 之后的任何代码都会执行。

5. ...稍后...图像完全加载后，图像对象将执行 someCallbackFunction() 并发出警报。