Fatal编程技术网
  • javascript/
  • Javascript 功能赢得'；不要在画布上打印

Javascript 功能赢得'；不要在画布上打印

javascript function canvas

Javascript 功能赢得'；不要在画布上打印,javascript,function,canvas,Javascript,Function,Canvas,我正在用javascript编写一个视频游戏，但我无法将我的函数打印到画布上。我没有收到任何错误，所以我无法确定为什么会发生这种情况。此函数应将图像的名称包含在单独的图像文件中存储的.png、x和y位置、图像的高度和宽度以及用于打印的画布和上下文中。下面是我的代码 function loadCanvas(){ var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); //Spr

我正在用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();

}

<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，上面的所有代码都包装在“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>


您的浏览器不支持此操作。
看看这几行：

<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>

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);
}
您需要将预期的
此
传递给函数，在函数外部的变量中使用或保存
此

<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>
因此，使用.bind解决方案：

<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>

//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);
}
和使用变量的解决方案：

<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>

//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);
        };
}
找到以下代码段：

<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>

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

<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中的
this
，那将非常有用，因为它与其他语言中的
this
非常不同。我想林克会有帮助的。 
<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>