Question

我使用HTML画布绘制，然后在屏幕上移动一个红色方块。但是，当我更改方块的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>

`

Answer 1

您需要全局定义mg_player1个对象。如果使用var关键字，则仅在当前函数上下文中创建对象。

mg_player1 = new mg_player("red", 0, 670);

您需要在mg_clear函数中调用moveUp来重绘为画布。还可以更好地阅读width函数中画布的height和mg_clear属性。

所以脚本应该是这样的。

＆＃13;

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

＆＃13;

在HTML画布中重绘对象的问题

1 个答案: