javascript - 如何使用 javascript 将 html 5 Canvas 居中

Question

我正在尝试使用 javascript 将动态 html 5 Canvas 窗口居中。我知道我的代码不起作用，但我想知道是否有一种方法可以实现 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() {
}

Answer 1

使 Canvas 成为 block 级元素。您可以使用 CSS 或将此行添加到您的代码中:

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>