gpt4 book ai didi

javascript - 如何居中 Canvas javascript?

转载 作者:行者123 更新时间:2023-11-30 08:48:19 25 4
gpt4 key购买 nike

我在尝试弄清楚如何在页面中居中 Canvas 时遇到问题。 Canvas 的代码位于 javascript 文件中。这是页面的 html。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Game Tut</title>
</head>
<body>

<script src="game.js"></script>
</body>
</html>

我在 javascript 文件中试过类似的东西。

var canvas = document.createElement("canvas");
canvas.width = 800;
canvas.height = 600;
canvas.tabindex = 0;
canvas.style = "position: absolute; top: 50px; left: 50px; border:2px solid blue"
document.addEventListener('keydown', doKeyDown, true);
var ctx = canvas.getContext("2d");
document.body.appendChild(canvas);

由于某些原因,蓝色边框或定位似乎没有显示在 Google Chrome 中。

最佳答案

试试这个

下面的代码使 Canvas 居中

canvas.style = "position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: auto; border:2px solid blue";

顺便说一下

document.addEventListener('keydown', doKeyDown, true);

我发布了您的代码,但 chrome 显示 'doKeyDown' 函数未定义,因此您可能需要修复此错误,然后您的 Canvas 才能正确显示。

Error showed

关于javascript - 如何居中 Canvas javascript?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19921248/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com