如何使用 JavaScript 调整 canvas 的大小？

Question

如何使 JavaScript canvas（或 400px x 400px 绘图区域的任何名称）大于 400x400？

我有一个 1440p 的屏幕，当我通过 HTML 文件运行我的 JS 文件时，canvas 是左上角一个 400px x 400px 的小框，这不足为奇。

我可以做些什么来将 canvas 扩展到指定的高度和宽度吗？

Answer 1

下面的 jsfiddle 演示了如何调整 canvas 的大小。 https://jsfiddle.net/intrinsica/msj0cwx3/

(function() {
  var canvas = document.getElementById('canvas'),
      context = canvas.getContext('2d');

  // Event handler to resize the canvas when the document view is changed
  window.addEventListener('resize', resizeCanvas, false);

  function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    // Redraw everything after resizing the window
    drawStuff(); 
  }
  resizeCanvas();

  function drawStuff() {
    // Do drawing here
    context.strokeRect(10,10, 230,100);
    context.font = '16px serif';
    context.fillText('The canvas is the blue', 30, 30);
    context.fillText('background color seen here.', 30, 50);
    context.fillText('It will resize if the window', 30, 70);
    context.fillText('size is adjusted.', 30, 90);
  }
})();

* { margin:0; padding:0; } /* to remove the top and left whitespace */

html, body { width:100%; height:100%; } /* just to be sure these are full screen*/

canvas {
    background: #77f;  /* to show the canvas bounds */
    display:block;     /* to remove the scrollbars */
}

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

Answer 2

您要声明 canvas 到 HTML 吗？如果是，您可以使用：

<canvas id="myCanvas" width="1400" height="900"></canvas>

如果想通过Javascript改变尺寸，可以使用：

<script type="text/javascript">
    document.getElementById('myCanvas').height = 800;
    document.getElementById('myCanvas').width = window.innerWidth;
</script>

Answer 3

因为 Javascript 可能会忽略 CSS 尝试在 javascript 和 CSS 中设置 canvas 宽度和高度例如，如果您的 ID 名为 canvas，我希望我的 canvas 的宽度为 650px，高度为 750px，并且还在 canvas 标签

中添加宽度和高度

canvas.width = 650px;
canvas.height = 750px;

Answer 4

如果您在项目中使用 Processing.JS，我或许可以提供帮助。我不确定它是否适用于常规 JavaScript。不过值得一试

size(screenHeight, screenWidth);

如果你想自动检测屏幕尺寸也可以这样

var screenSizeH = screen.height;

或

var screenSizeW = screen.width;

不过，您可能运行遇到问题。由于调整大小 canvas 只是调整大小 canvas，而不是内部的任何内容。

解决这个问题的一个方法是将你所有的东西乘以一个比例。

var scaless = screenSize/400;

如果它是正方形，则必须将所有值乘以比例。您必须为高度和宽度制作 2 个比例

Answer 5

canvas 元素就像任何标准的 DOM 对象。因此，您可以使用标准 CSS:

调整 canvas 的大小

<canvas />
<style>
canvas {
  width: 100%;
  min-height: 400px;
}
</style>

https://jsfiddle.net/z3pL9qp9/

canvas容易重塑；这是您需要重绘的内容，以确保您已考虑尺寸变化。

如何使用 JavaScript 调整 canvas 的大小？

How to resize the canvas using JavaScript?

html

javascript

firefox

canvas

window-resize