使用 css 或 js 將 Canvas 縮放到屏幕的最佳方法是什么？ 以及如何使畫布的寬度等於高度？

Question

我想做一個 TIC TAC TOE，我對 js 很陌生。 我想將 x 和 0 繪制到畫布上。 1. 如何使高度等於畫布的寬度？ 2. 縮放畫布以在例如手機上使用它並具有相同體驗的最佳方法是什么？

Answer 1

您可以制作全屏畫布並使用它來顯示您的代碼。
這是一個樣板，可以幫助您入門：

HTML

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

CSS

* {
  margin: 0;
}

canvas {
  display: block;
}

JS

window.onload = function() {
  var canvas = document.getElementById("canvas"),
      context = canvas.getContext("2d"),
      width = canvas.width = window.innerWidth,
      height = canvas.height = window.innerHeight;

  context.fillRect(0, 0, width, height);
};