Question

我正在使用javascript开发视频游戏，但我无法将我的功能打印到画布上。我没有收到任何错误，所以我无法确定为什么会这样。此函数应该将图像的名称连接到存储在单独的图像文件中的.png，x和y位置，图像的高度和宽度以及要在其上打印的画布和上下文。以下是我的代码。

function loadCanvas(){

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

//Sprite function
var sprite = function(imageName, imageX, imageY, imageHeight, imageWidth, context, canvas){
    this.imageName = imageName;
    this.imageX = imageX;
    this.imageY = imageY;
    this.imageHeight = imageHeight;
    this.imageWidth = imageWidth;
    this.canvas = canvas;
    this.context = context;
}

//Sprite draw function
sprite.prototype.draw = function(){
        var character = new Image();
        character.src = "../Images/" + this.imageName + ".png";
        var cont = this.context;
        character.onload = function(){
            cont.drawImage(character, this.imageX, this.imageY, this.imageWidth, this.imageHeight);
        }
}

sprite.prototype.getHeight = function(){
        return this.imageHeight;
    }

    sprite.prototype.getWidth = function(){
        return this.imageWidth;
    }

    sprite.prototype.getX = function(){
        return this.imageX;
    }

    sprite.prototype.getY = function(){
        return this.imageY;
    }

    sprite.prototype.moveUpX = function(e){
        this.imageX = (this.imageX + e);
    }

    sprite.prototype.moveUpY = function(e){
        this.imageY = (this.imageY + e);
    }

    sprite.prototype.moveBackX = function(e){
        this.imageX = (this.imageX - e);
    }

    sprite.prototype.moveBackY = function(e){
        this.imageY = (this.imageY - e);
    }

    sprite.prototype.changeImage = function(e){
        this.imageName = e;
    }

    sprite.prototype.getImage = function(){
        return this.imageName;
    }

    sprite.prototype.changeX = function(e){
        this.imageX = e;
    }

    sprite.prototype.changeY = function(e){
        this.imageY = e;
    }

    sprite.prototype.getContext = function(){
        return this.context;
    }

var sprites = [];
sprites[1]= new sprite("RoomOne", 0, 0, 800, 400, context, canvas);
sprites[1].draw();

}

这是我的HTML，以上所有代码都包含在“loadCanvas”函数中：

<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src = 'game.js'></script>


</head>

<body onload = "loadCanvas()">

<canvas id='canvas' width="800" height="400" style="border:0px solid  #c3c3c3;">
This is not supported in your browser.
</canvas>


</body>
</html>

Answer 1

看看这一行：

character.onload = function(){
    // "this" variable is not that you expect,
    // "this" refers to "window" object.
    // yon can try to console.log(this);
    cont.drawImage(character, this.imageX, this.imageY, this.imageWidth, this.imageHeight);
}

您需要将预期this传递给函数，使用.bind(this)或将this保存在函数外部的变量中。

所以，使用.bind的解决方案：

//Sprite draw function
sprite.prototype.draw = function(){
        var character = new Image();
        character.src = "../Images/" + this.imageName + ".png";
        var cont = this.context;
        character.onload = function(){
            cont.drawImage(character, this.imageX, this.imageY, this.imageWidth, this.imageHeight);
        }.bind(this);
}

和使用变量的解决方案：

//Sprite draw function
sprite.prototype.draw = function(){
        var character = new Image();
        character.src = "../Images/" + this.imageName + ".png";
        var cont = this.context;
        var self = this;

        character.onload = function(){
            cont.drawImage(character, self.imageX, self.imageY, self.imageWidth, self.imageHeight);
        };
}

Answer 2

找到此代码段：

   window.onload = function() {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);

};

不确定为什么使用这个。。

功能不会打印到画布

2 个答案: