Question

我无法弄清楚如何在画面中居中画布。画布的代码在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中。

Answer 1

var canvas = document.getElementsByName("canvas")[0];
var style = canvas.style;
style.marginLeft = "auto";
style.marginRight = "auto";
var parentStyle = canvas.parentElement.style;
parentStyle.textAlign = "center";
parentStyle.width = "100%";

OR

canvas.style = "position:absolute; left: 50%; width: 400px; margin-left: -200px;";

Answer 2

试试这个：

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

Answer 3

尝试一下

下面的代码使画布居中

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'函数未定义，因此也许您需要修复此错误，然后画布才能正确显示。

Error showed

如何居中画布javascript？

3 个答案: