在前端开发中，HTML Canvas 是一个非常常见的元素。但是在某些情况下，我们需要调整它的大小以适应不同的场景。本文将介绍如何使用 JavaScript 调整 Canvas 元素的大小，并提供示例代码。
获取 Canvas 元素
在调整 Canvas 元素之前，我们需要先获取它。可以使用 document.getElementById 方法或其他选择器方法来获取 Canvas 元素。
const canvas = document.getElementById('my-canvas');调整 Canvas 大小
要调整 Canvas 的大小，我们需要设置其 width 和 height 属性。这两个属性定义了 Canvas 元素的像素宽度和高度。默认情况下，Canvas 的大小为 300 像素 x 150 像素。
例如，如果我们想将 Canvas 元素的大小调整为 400 像素 x 200 像素，可以按照以下方式更改其属性：
canvas.width = 400; canvas.height = 200;
请注意，在设置新的宽度和高度值后，Canvas 元素上的任何现有内容都将被清除。因此，在调整大小之前，请确保将任何必要的数据保存到其他变量中。
根据父元素自适应调整 Canvas 大小
有时候，我们希望 Canvas 元素的大小能够根据其父元素的大小自适应调整。这可以通过 JavaScript 和 CSS 来完成。
首先，我们需要使用 CSS 将 Canvas 元素的宽度和高度设置为 100%，以确保其填充其父元素。
canvas {
width: 100%;
height: 100%;
}然后，当窗口大小发生变化时，我们需要通过 JavaScript 动态调整 Canvas 元素的大小。为此，我们可以将以下代码添加到 window.onresize 事件处理程序中：
window.onresize = function() {
const canvas = document.getElementById('my-canvas');
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
};这将在窗口大小变化时获取 Canvas 元素的当前宽度和高度，并将其设置为新的宽度和高度值。
示例代码
下面是一个完整的示例代码，演示如何根据父元素自适应调整 Canvas 元素的大小：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- -------- ---------------
-------
------ -
------ -----
------- -----
------- --- ----- ------
-
--------
-------
------
---- ----------------------------------
------- ------------------------
------
--------
--- ------ - -------------------------------------
-------- -------------- -
------------ - -------------------
------------- - --------------------
-
--------------------------------- ------------- -------
---------------
---------
-------
-------在这个例子中，我们将 Canvas 元素包装在一个 <div> 元素中，并将其设置为固定宽度和高度。然后，我们使用 CSS 将 Canvas 元素的宽度和高度设置为 100%，以确保其始终填充其父元素。
最后，我们添加了一个 resizeCanvas 函数，该函数将在窗口大小变化时被调用。此函数获取 Canvas 元素的当前宽度和高度，并将其设置为新的宽度和高度值。
结论
调整 HTML Canvas 元素的大小是前端开发中的一项重要任务。通过本文提供的代码演示，您可以快速开始并调整你的画布元素到所需的大小。如果您希望使 Canvas 元素自
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26472