好的。所以我有一个 id 为 mainCanvas 的 Canvas ，在同一个 html 页面上有 javascript 和 css。我想要它，这样我就可以在 javascript 中使东西具有一定的 Canvas 宽度(例如，红色矩形是 Canvas 的宽度和高度)。所以我在 css 中将 Canvas 宽度设置为 60%，将高度设置为 500px(高度不是问题)，并且我有代码，
var canvas = document.getElementById("mainCanvas");
var context = document.getContext("2d");
var width = canvas.width;
var height = canvas.height;
获取 Canvas 的宽度和高度。然后我有一个 setInterval() 函数，其中包含一个调用和更新函数的游戏函数，以及一个渲染函数。
function game() {
update();
render();
}
function update() {
}
function render() {
context.fillStyle = "red";
context.fillRect(0, 0, width, height);
}
setInterval(function() {
game();
}, 1000/30);
所以我有一个矩形，它的宽度参数是宽度变量，高度参数是高度变量。
为了更容易看到，这里有一个片段。
<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 上看到过很多问题，但这些都不能解决我的问题。
最佳答案
改变行:
var context = document.getContext("2d");
收件人:
var context = canvas.getContext("2d");
关于javascript - 获取 Canvas 宽度问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31330357/