使用 css 或 js 将 Canvas 缩放到屏幕的最佳方法是什么？以及如何使 canvas 的宽度等于高度？

Question

我想做一个 TIC TAC TOE，我对 js 还很陌生。我想将 x 和 0 绘制到 canvas。 1.如何让高度等于canvas的宽度？ 2. 扩展 canvas 以在手机上使用它并获得相同体验的最佳方式是什么？

Answer 1

您可以制作一个全屏 canvas 并用它来显示您的代码。
这是一个让你开始的样板：

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);
};

使用 css 或 js 将 Canvas 缩放到屏幕的最佳方法是什么？以及如何使 canvas 的宽度等于高度？

What is the best way to scale an Canvas with css or js to the screen? And how do I make the width of the canvas equal to the height?

html

javascript

css

scaling

canvas