如何使用 JavaScript 调整画布大小？

Posted 2023-03-05

【中文标题】如何使用 JavaScript 调整画布大小？

【英文标题】：How to resize the canvas using JavaScript?

【发布时间】：2017-01-26 13:04:36

【问题描述】：

如何使 javascript 画布（或称为 400 x 400 像素的绘图区域）大于 400x400？

我有一个 1440p 的屏幕，当我通过 html 文件运行我的 JS 文件时，画布在左上角是一个 400 像素 x 400 像素的小框，这并不奇怪。

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

【问题讨论】：

请包含您的代码或制作一个 jsfiddle，以便我们处理您的代码。或者告诉你问题

【参考方案1】：

以下 jsfiddle 演示了如何调整画布大小。 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>

【参考方案2】：

您是通过 HTML 声明画布吗？如果你是，你可以使用：

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

如果你想通过Javascript改变大小，你可以使用：

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

【参考方案3】：

由于 Javascript 可能会忽略 CSS，因此尝试在 javascript 和 CSS 中设置画布宽度和高度，例如，如果您的 id 称为画布，我希望画布的宽度为 650 像素，高度为 750 像素并在画布标签中添加宽度和高度

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

【参考方案4】：

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

size(screenHeight, screenWidth);

如果你想自动检测屏幕大小，也可以这样

var screenSizeH = screen.height;

或

var screenSizeW = screen.width;

不过，您可能会遇到问题。因为调整画布的大小只是调整画布的大小，而不是里面的任何东西。

解决此问题的一种方法是将您拥有的所有内容乘以一个比例。

var scaless = screenSize/400;

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

【参考方案5】：

canvas 元素就像任何标准的 DOM 对象。因此，您可以使用标准 CSS 调整画布大小：

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

</style>

https://jsfiddle.net/z3pL9qp9/

---

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