带有纹理的 JavaScript 对象

Question

您好，我正在开发一个小型 JavaScript 游戏，我编写了一个 Object 构造函数来创建游戏的 SpaceCraft 对象。
构造函数的代码是

function SpaceCraft () {

var obj = this;

this.texture = new Image();
this.texture.src = "img/spacecraft.png";
this.texture.onload = function () {
    obj.w = this.width;
    obj.h = this.height;
}

this.x = canvasW / 2 - this.w / 2;
this.y = canvasH / 2 - this.h;

//Methods

//Draw
this.draw = function () {
    ctx.drawImage(this.texture, this.x, this.y);
}
}

在构造函数中存在两个问题：

1. this.w 和 this.h 等于 0，尽管图像的大小不是 0x0
2. this.x 和 this.y 等于 NaN，但它们应该是一个数字

var canvas;
var ctx;
var canvasH;
var canvasW;


window.onload = function () {
canvas  = document.getElementById("canvas");
ctx     = canvas.getContext('2d');

canvasH = 480;
canvasW = 960;

canvas.width  = canvasW;
canvas.height = canvasH;

drawCanvas();
}

这是画布功能

function drawCanvas () {

ctx.fillStyle = "#000000"
ctx.fillRect(0, 0, canvasW, canvasH);
}

构造函数有什么问题？
谢谢。

Answer 1

图像尚未加载。这就是为什么你得到宽度和高度。使用onload 事件处理程序来设置这些参数。

我不能说为什么this.x 和this.y 是NaN，但很可能canvasW 和canvasH 没有正确定义。考虑改用ctx.canvas.width 和ctx.canvas.height。