时间戳

首页 > 解决方案 > 将带有 css 或 js 的 Canvas 缩放到屏幕的最佳方法是什么？以及如何使画布的宽度等于高度？

javascript - 将带有 css 或 js 的 Canvas 缩放到屏幕的最佳方法是什么？以及如何使画布的宽度等于高度？

问题描述

我想做一个井字游戏，我对 js 很陌生。我想将 x 和 0 绘制到画布上。1. 如何让画布的高度等于画布的宽度？2. 缩放画布以在手机上使用它并拥有相同体验的最佳方式是什么？

标签： javascripthtmlcsscanvasscaling

解决方案

您可以制作全屏画布并使用它来显示您的代码。
这是一个样板文件，可以帮助您入门：

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

推荐阅读