Question

这是一个用于在页面上渲染动画的脚本，我在this tutorial的一部分。我定义了一个精灵类，然后创建一个名为coin的实例，但硬币的属性似乎没有被定义。调试器在尝试运行coin.render（）时说我的上下文是未定义的，但我不知道我的实例化有什么问题。

如果需要，我可以提供html或图片。

window.onload = function () {

var spriteSheet = new Image();
spriteSheet.src = "spriteSheet.jpg";

//define sprite class

function sprite(options) {

    var that = {};

    this.context = options.context;
    this.width = options.width;
    this.height = options.height;
    this.image = options.image;

    that.render = function() {

        that.context.drawImage(
            that.image,
            0,
            0,
            that.width,
            that.height,
            0,
            0,
            that.width,
            that.height
        );

    }

    return that;

}

var canvas = document.getElementById("coinAnimation");
canvas.width = 100;
canvas.height = 100;

var coin = sprite({
        context: canvas.getContext("2d"),
        width: 100,
        height: 100,
        image: spriteSheet
});

//alert(coin.width);

coin.render();

}

Answer 1

据我所知，唯一不对的就是这一行：

var coin = sprite({

应该是

var coin = new sprite({

第一个告诉JavaScript将构造函数作为函数执行。第二个告诉JS创建一个新实例。

此外，变量that是一个空对象。您需要为其分配this而不是{}

为什么我的实例的属性未定义？

1 个答案: