Uncaught TypeError: Cannot read property 'canvas' of undefined - Javascript Object
Uncaught TypeError: Cannot read property 'canvas' of undefined - Javascript Object
我对如何使用、定义、更改和取消设置 javascript 对象感到困惑。
我的javascript对象是:
var Ship = function(){
return {
canvas: $('#area')[0],
canvas_width: this.canvas.width,
canvas_height: this.canvas.height,
context: this.canvas.getContext("2d"),
ship_image: new Image(),
ship_width: null,
ship_height: null,
ship_x: 0,
ship_y: 0,
init: function() {
this.ship_image.onload = function() {
this.ship_width = this.width;
this.ship_height = this.height;
this.ship_x = (this.canvas_width / 2) - (this.ship_width / 2);
this.ship_y = this.canvas_height - this.height;
this.draw(
this.ship_x,
this.ship_y
);
}
this.ship_image.src = "ship.gif";
},
draw: function(x, y) {
this.context.drawImage(
this.ship_image,
x,
y
);
}
}
}();
当我像这样执行这段代码时;
$(function(){
Ship.init();
Controller.init();
});
我每次都会收到这个错误。
Uncaught TypeError: Cannot read property 'width' of undefined on line 4 (ship.js)
Uncaught TypeError: Ship is not a function on line 29
(index.html / Ship.init())
我现在该怎么办?
问题是 this.canvas
没有指向对象 ship
的 canvas
属性,它指向全局对象 window
。您需要以不同方式初始化 canvas_width
,例如在 init 函数中。和 context
:
一样
var Ship = function () {
return {
canvas: $('#area')[0],
ship_image: new Image(),
ship_width: null,
ship_height: null,
ship_x: 0,
ship_y: 0,
init: function () {
this.context = this.canvas.getContext("2d");
this.canvas_width = this.canvas.width;
this.canvas_height = this.canvas.height;
this.ship_image.onload = function () {
this.ship_width = this.ship_image.width;
this.ship_height = this.ship_image.height;
this.ship_x = (this.canvas_width / 2) - (this.ship_width / 2);
this.ship_y = this.canvas_height - this.ship_image.height;
this.draw(this.ship_x, this.ship_y);
}.bind(this);
this.ship_image.src = "ship.gif";
},
draw: function (x, y) {
this.context.drawImage(this.ship_image, x, y);
}
}
}();
我对如何使用、定义、更改和取消设置 javascript 对象感到困惑。
我的javascript对象是:
var Ship = function(){
return {
canvas: $('#area')[0],
canvas_width: this.canvas.width,
canvas_height: this.canvas.height,
context: this.canvas.getContext("2d"),
ship_image: new Image(),
ship_width: null,
ship_height: null,
ship_x: 0,
ship_y: 0,
init: function() {
this.ship_image.onload = function() {
this.ship_width = this.width;
this.ship_height = this.height;
this.ship_x = (this.canvas_width / 2) - (this.ship_width / 2);
this.ship_y = this.canvas_height - this.height;
this.draw(
this.ship_x,
this.ship_y
);
}
this.ship_image.src = "ship.gif";
},
draw: function(x, y) {
this.context.drawImage(
this.ship_image,
x,
y
);
}
}
}();
当我像这样执行这段代码时;
$(function(){
Ship.init();
Controller.init();
});
我每次都会收到这个错误。
Uncaught TypeError: Cannot read property 'width' of undefined on line 4 (ship.js)
Uncaught TypeError: Ship is not a function on line 29 (index.html / Ship.init())
我现在该怎么办?
问题是 this.canvas
没有指向对象 ship
的 canvas
属性,它指向全局对象 window
。您需要以不同方式初始化 canvas_width
,例如在 init 函数中。和 context
:
var Ship = function () {
return {
canvas: $('#area')[0],
ship_image: new Image(),
ship_width: null,
ship_height: null,
ship_x: 0,
ship_y: 0,
init: function () {
this.context = this.canvas.getContext("2d");
this.canvas_width = this.canvas.width;
this.canvas_height = this.canvas.height;
this.ship_image.onload = function () {
this.ship_width = this.ship_image.width;
this.ship_height = this.ship_image.height;
this.ship_x = (this.canvas_width / 2) - (this.ship_width / 2);
this.ship_y = this.canvas_height - this.ship_image.height;
this.draw(this.ship_x, this.ship_y);
}.bind(this);
this.ship_image.src = "ship.gif";
},
draw: function (x, y) {
this.context.drawImage(this.ship_image, x, y);
}
}
}();