Javascript使用回调画一个图像到画布

Question

我想我有一个类似的问题，this question，但我想了解如何使用回调函数，以及如何实现它为我的特定情况一点帮助。我试图让图像按需“绘制到画布上，即任何时候调用某个函数。图像与我称之为块的对象相关联。块有尺寸，坐标和网址。

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（）并且警报将会响起。