个人中心
gpt4 book ai didi

javascript - 获取 Canvas 宽度问题

转载 作者：行者123 更新时间：2023-11-28 07:34:15 25 4
gpt4 key购买 nike

好的。所以我有一个 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/

25 4 0
文章推荐： javascript - 完全可以用meteor来开发手机app吗
文章推荐： ios - '无效更新 : invalid number of items in section 0 in my collection view
文章推荐： c++ - 三次样条 : Start/End Segment interpolation
文章推荐： php - 垂直旋转文本的浏览器回退
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com