遇到画布宽度问题答案

【问题标题】：Getting canvas width trouble遇到画布宽度问题
【发布时间】：2015-09-28 14:07:09
【问题描述】：

好的。所以我有一个 id 为 mainCanvas 的画布，在同一个 html 页面上带有 javascript 和 css。我想拥有它，以便我可以在 javascript 中制作画布的特定宽度（例如，红色矩形是画布的宽度和高度）。所以我在css中将画布宽度设置为60%，高度设置为500px（高度不是问题），我有代码，

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

var width = canvas.width;
var height = canvas.height;

获取画布的宽度和高度。然后我有一个 setInterval() 函数，其中包含一个调用和更新函数的游戏函数和一个渲染函数。

function game() {
    update();
    render();
}

function update() {

}

function render() {
    context.fillStyle = "red";
    context.fillRect(0, 0, width, height);
}

setInterval(function() {
    game();
}, 1000/30);

所以我有一个矩形，其宽度变量作为宽度参数，高度变量作为高度参数。

为了便于查看，这里有一个 sn-p。

<html>
<head>
	<title></title>
	<style type="text/css">
		body {
			background-color: #222222;
		}
		canvas {
			background-color: #1f1f1f;
			width: 60%;
			height: 500px;
		}
	</style>
</head>
<body>
	<canvas id="mainCanvas"></canvas>
	<script type="text/javascript">
		
		var canvas = document.getElementById("mainCanvas");
		var context = document.getContext("2d");

		var width = canvas.width;
		var height = canvas.height;

		function game() {
			update();
			render();
		}

		function update() {

		}

		function render() {
			context.fillStyle = "red";
			context.fillRect(0, 0, width, height);
		}

		setInterval(function() {
			game();
		}, 1000/30);

	</script>
</body>
</html>

为什么宽度和高度不起作用？我在 stackoverflow 上看到了很多问题，但这些问题并不能解决我的问题。

【问题讨论】：

标签： javascript html css canvas

【解决方案1】：

改成：

var canvas = document.getElementById("mainCanvas");
var context = canvas.getContext("2d"); // `canvas` instead of `document`

var width = canvas.width;
var height = canvas.height;

【讨论】：

【解决方案2】：

换行：

var context = document.getContext("2d");

收件人：

var context = canvas.getContext("2d");

【讨论】：