图像的onload不工作，错误遗漏的类型错误：错误类型

Question

我想用image = new Image();

我定义了三种不同的图像新varible绘制图像。

当我运行代码，我得到的错误“遗漏的类型错误：错误类型”

如何正确修复代码绘制所有，其中包括在varible图像的图像。

Demo jsFFidle

非常感谢。

var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d'); 
    canvas.width = 1000; 
    canvas.height = 500; 
var BACKGROUND = { 
    p1: { url : "http://flora4me.com/im/b/1149.jpg",x: 5, y: 5, w: 1280, h: 480 , dx:0 ,dy:0 ,dw:500 ,dh:500 }, 
    p2: { url : "http://flora4me.com/im/b/1119.jpg",x: 5, y: 495, w: 1280, h: 480 , dx:100 ,dy:100 ,dw:500 ,dh:500}, 
    p3: { url : "http://vladfilippov.com/blog/2012-12-07/intro.jpg",x: 5, y: 985, w: 1280, h: 480 , dx:200 ,dy:200 ,dw:500 ,dh:500 } 
    }; 
var image; 
for (var n in BACKGROUND) 
{ 
    image = new Image(); 
    image.src = BACKGROUND[n].url; 
    image.onload = function() { 
    ctx.drawImage(image, BACKGROUND[n].x,BACKGROUND[n].y, BACKGROUND[n].w, BACKGROUND[n].h, BACKGROUND[n].dx, BACKGROUND[n].dy, BACKGROUND[n].dw, BACKGROUND[n].dh); 
     }; 
} 

Answer 1

现在你绘制p3三次，而不是遍历BACKGROUND。虽然这不会解释“类型错误”。可能你正在使用一个库，它为Object原型添加了属性。要解决这些，切换BACKGROUND到数组，并创建你的循环是这样的：

for (var n = 0; n < BACKGROUND.length; n++) { 
    image = new Image(); 
    (function (x) {image.onload = function() { 
      ctx.drawImage(image, BACKGROUND[x].x,BACKGROUND[x].y, BACKGROUND[x].w, BACKGROUND[x].h, BACKGROUND[x].dx, BACKGROUND[x].dy, BACKGROUND[x].dw, BACKGROUND[x].dh); 
     } 
    }(n)); 
    image.src = BACKGROUND[n].url; 
} 

您也可以保存BACKGROUND对象，但在这种情况下，你需要检查的财产在for..in第一线被预期：

if (!BACKGROUND.hasOwnProperty(n)) continue;