如何使用 JavaScript 将 HTML 5 画布居中显示

Question

我正在尝试使用JavaScript居中动态html 5画布窗口。我知道我目前的代码不起作用，但我想知道是否有一种方法来实现margin-left: auto/margin-left: auto技术，通常可以在html页面内居中元素。我还尝试了使用我的canvas类CSS进行此操作，但也没有起作用，因此非常感谢任何帮助。谢谢。

我的代码：

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


document.getElementById("canvas").style.marginLeft = "auto";
document.getElementById("canvas").style.marginRight = "auto";

canvas.width = 300;
canvas.height = 300;
drawScreen();

formElement = document.getElementById("height");
formElement.addEventListener('change', heightChanged, true);

formElement = document.getElementById("width");
formElement.addEventListener('change', widthChanged, false);

function widthChanged(e) {
  var target = e.target;
  canvas.width = target.value;
  drawScreen();
}

function heightChanged(e) {
  var target = e.target;
  canvas.height = target.value;
  drawScreen();
}

function drawScreen() {
}

- Xavier

---

你想要将画布窗口居中吗？ - ZEE

是的，我正在尝试将画布窗口居中。 - Xavier

为什么你不使用CSS来居中它？ - ZEE

如果将左右边距设置为“auto”，它不会将画布居中，我希望即使调整浏览器窗口大小，它仍然保持居中。 - Xavier

Answer 1

将画布设为块级元素。您可以通过CSS或将以下代码行添加到您的代码中来实现： ```css canvas { display: block; } ```

canvas.style.display= 'block';

例子：

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

document.getElementById("canvas").style.marginLeft = "auto";
document.getElementById("canvas").style.marginRight = "auto";
canvas.style.display= 'block';
canvas.width = 300;
canvas.height = 300;
drawScreen();

formElement = document.getElementById("height");
formElement.addEventListener('change', heightChanged, true);

formElement = document.getElementById("width");
formElement.addEventListener('change', widthChanged, false);

function widthChanged(e) {
  var target = e.target;
  canvas.width = target.value;
  drawScreen();
}

function heightChanged(e) {
  var target = e.target;
  canvas.height = target.value;
  drawScreen();
}

function drawScreen() {
}

canvas {
  border: 1px solid black;
  background: yellow;
}

<canvas id="canvas"></canvas>

<div id="height"></div>
<div id="width"></div>

- Rick Hitchcock

Answer 2

你可以用 CSS 这样做：

canvas {
        display: block;
        position: absolute;
        margin: auto;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

或者使用 javascript：

 document.getElementById("canvas").style.display = "block";
        document.getElementById("canvas").style.margin = "auto";
        document.getElementById("canvas").style.position = "absolute";
        document.getElementById("canvas").style.top = 0;
        document.getElementById("canvas").style.bottom = 0;
        document.getElementById("canvas").style.left = 0;
        document.getElementById("canvas").style.right = 0;

实时演示

- ZEE

Answer 3

为什么不把你的画布放到一个 div 容器里呢？

你也可以通过 JavaScript 来实现。

var container = document.createElement("div");
container.style.marginLeft = "auto";
container.style.marginRight = "auto";
container.style.width = "300px";

container.innerHtml = canvas;

- Mehmet Otkun