我正在使用 HTML Canvas 进行绘制，然后在屏幕上移动一个红色方 block 。但是，当我更改正方形的 x 值并重新绘制它时，会抛出一个错误，指出“mg_player1 未定义...”我似乎无法弄清楚代码中的问题，有人可以帮忙吗？
<html>
<head>
<style>
#mg_canvas {
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
width: 1600px;
height: 800px;
border: 4px solid black;
}
</style>
<body onload="mg_start()">
<div class="hideMultiGames">
<button class="button" onclick="mg_player1.moveUp()">Click me!</button>
<script>
function mg_start() {
multiGames_area.drawCanvas();
var mg_player1 = new mg_player("red", 0, 670);
}
var multiGames_area = {
canvas : document.createElement("canvas"),
drawCanvas : function() {
if (document.getElementById("mg_canvas")) {
}
else {
this.canvas.width = 1600;
this.canvas.height = 800;
this.canvas.id = "mg_canvas"
this.canvas.className = "hideMultiGames";
multiGames_area.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
}
},
mg_drawGround : function() {
var mg_ground;
mg_ground = document.getElementById("mg_canvas");
var ground = mg_ground.getContext("2d");
ground.moveTo(0,700);
ground.lineTo(1600,700);
ground.stroke();
},
mg_clear : function() {
this.context.clearRect(0, 0, 1600, 800);
},
}
function mg_player(color, x, y) { //stores general shared methods and properties of players
this.width = 30;
this.height = 30;
this.color = color;
this.x = x;
this.y = y;
ctx = multiGames_area.context;
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.width, this.height);
this.moveUp = function() { //function that is throwing errors
this.x = 1000;
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.width, this.height);
};
}
</script>
</div>
</body>
</html>`
最佳答案
您需要全局定义mg_player1对象。如果您使用 var 关键字，则仅在当前函数上下文中创建对象。
mg_player1 = new mg_player("red", 0, 670);
并且需要在moveUp函数中调用mg_clear来重绘到canvas。另外，最好在 mg_clear 函数中读取 Canvas 中的 width 和 height 属性。
所以脚本应该是这样的。
<html>
<head>
<style>
#mg_canvas {
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
width: 1600px;
height: 800px;
border: 4px solid black;
}
</style>
<body onload="mg_start()">
<div class="hideMultiGames">
<button class="button" onclick="mg_player1.moveUp()">Click me!</button>
<script>
function mg_start() {
multiGames_area.drawCanvas();
//define the `mg_player1` object global (in the `window` context)
mg_player1 = new mg_player("red", 0, 670);
}
var multiGames_area = {
canvas : document.createElement("canvas"),
drawCanvas : function() {
if (document.getElementById("mg_canvas")) {
}
else {
this.canvas.width = 1600;
this.canvas.height = 800;
this.canvas.id = "mg_canvas"
this.canvas.className = "hideMultiGames";
multiGames_area.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
}
},
mg_drawGround : function() {
var mg_ground;
mg_ground = document.getElementById("mg_canvas");
var ground = mg_ground.getContext("2d");
ground.moveTo(0,700);
ground.lineTo(1600,700);
ground.stroke();
},
mg_clear : function() {
//read the width and heigth from the canvas
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
},
}
function mg_player(color, x, y) { //stores general shared methods and properties of players
this.width = 30;
this.height = 30;
this.color = color;
this.x = x;
this.y = y;
ctx = multiGames_area.context;
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.width, this.height);
this.moveUp = function() {
//clear the canvas
multiGames_area.mg_clear();
this.x = 1000;
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.width, this.height);
};
}
</script>
</div>
</body>
</html>关于javascript - 在 HTML Canvas 中重绘对象时出现问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41210325/