Canvas 是 HTML5 提供的绘图技术，它可以让我们在网页中实现各种丰富的图形效果。但是，在使用 Canvas 进行绘图之前，我们需要先解决如何让它的宽高与父元素一致的问题。
方法一：使用 JavaScript 动态设置
我们可以通过 JavaScript 动态设置 Canvas 的宽高属性来实现与父元素一致。具体代码如下：
const canvas = document.getElementById('my-canvas');
const parent = canvas.parentNode;
canvas.width = parent.clientWidth;
canvas.height = parent.clientHeight;上述代码中，我们首先获取到 Canvas 元素以及其父元素。然后，通过 clientWidth 和 clientHeight 属性获取到父元素的宽高，并将其分别赋值给 Canvas 的 width 和 height 属性。
这种方法可以保证 Canvas 和父元素的宽高始终保持一致，但需要注意的是，如果父元素的宽高发生改变，我们还需要再次调用上述代码以更新 Canvas 的宽高属性。
方法二：使用 CSS 样式设置
除了使用 JavaScript 动态设置 Canvas 的宽高属性外，我们还可以通过 CSS 样式来实现宽高与父元素一致的效果。具体代码如下：
canvas {
width: 100%;
height: 100%;
}上述代码中，我们使用了 CSS 中的百分比单位，将 Canvas 的宽高设置为父元素的百分之百。这样一来，Canvas 的宽高就可以和父元素自适应地伸缩，保证始终与父元素一致。
但需要注意的是，如果 Canvas 元素的外部容器存在边框或内边距等影响宽高的 CSS 样式，那么我们还需要进一步计算这些影响，并将其减去以得到正确的宽高值。
示例代码
下面是一个完整的示例代码，包含两种方法的实现：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------- ------------
-------
----------------- -
------ ------
------- ------
------- --- ----- -----
-------- -----
-
------ -
-- ------ --- -- --
-- ------ ----- --
-- ------- ----- --
-
--------
-------
------
---- ----------------------
------- ------------------------
------
--------
-- ------ ---------- ----
----- ------ - -------------------------------------
----- ------ - ------------------
------------ - ------------------ - --- -- -----------
------------- - ------------------- - ---
---------
-------
-------在这个示例代码中，我们首先通过 CSS 样式设置了 Canvas 的外部容器宽高为 400px，并添加了边框和内边距。然后，在 JavaScript 代码中，我们动态获取到 Canvas 元素的父元素，计算出正确的宽高值，并赋值给 Canvas 的 width 和 height 属性。
同时，我们还可以将 CSS 中的注释取消掉，使用方法二来实现宽高与父元素一致的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26509