功能不会打印到画布上答案

【问题标题】：Function won't print to canvas功能不会打印到画布上
【发布时间】：2016-03-02 05:11:49
【问题描述】：

我正在使用 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>

【问题讨论】：

你也能发布你的html吗？
我刚刚更新了它，希望对您有所帮助。谢谢。

标签： javascript function canvas

【解决方案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);
        };
}

【讨论】：

了解一下 JavaScript 中的 this 对您很有用，因为它与其他语言中的 this 非常不同。我认为This 链接会有所帮助。

【解决方案2】：

找到这段代码sn-p：

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

};

不确定您为什么要使用 this. .

【讨论】：