图像加载不起作用,错误Uncaught TypeError:类型错误
image onload not working , error Uncaught TypeError: Type error
我想使用image = new Image();
绘制图像
我用三个不同的图像定义了新的变量。
当我运行代码时,我得到错误"未捕获的类型错误:类型错误"
如何正确修复代码来绘制包含在可变图像中的所有图像。
演示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 );
};
}
现在绘制p3
三次,而不是在BACKGROUND
上迭代。尽管这并不能解释"类型错误"。可能您使用的是一个库,它为Object原型添加了属性。要解决这些问题,请将BACKGROUND
切换到一个Array并创建这样的循环:
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;
相关文章:
- gulp Iconify任务抛出错误TypeError:Path必须是字符串.收到false
- Steam bot错误-TypeError:无法读取属性'0'的未定义
- casperjs未捕获错误:TypeError:试图分配给readOnly属性
- 在Ionic应用程序中发送电子邮件会导致以下错误:TypeError:$cordovaEmailComposer.isA
- 出现错误:TypeError:window.event在我的javascript代码的firefox中未定义
- browserSync + Gulp,得到错误 => TypeError: _.contains 不是一个函数
- Angular 2.0 使用新的 Promise() 得到错误 TypeError: promise_1.Promise
- Javascript 错误:TypeError:“null”不是 safari 上的对象(评估“event.target
- MongoDB aggregate() - 错误“TypeError: 无法调用未定义的方法'forEach
- Angular JS ng表错误TypeError:newParams重载不是一个函数,并且达到了10次摘要迭代,ABo
- app.js显示错误:TypeError:无法调用方法'查询'为null
- angularjs$setPristine得到一个错误:TypeError:$scope$setPristine不是函数
- 第二次打开对话框时jQuery对话框错误-TypeError:oa不是函数
- javascript错误TypeError:scr为nullhttp://widgets.amung.us/classi
- 错误:TypeError:$(..).dialog不是函数
- Angular.js资源rest调用错误TypeError:undefined不是函数
- NodeJs、AngularJs、Mongoose给出错误:TypeError:Object.keys在Function
- Highcharts错误:TypeError:undefined不是对象(正在评估'chart.yAxis
- 如何消除此JS错误:TypeError:$(..).validate不是函数
- SailsJs中的错误.TypeError: Cannot read property '的定义