在前端开发中，HTML5 画布 canvas 是一个非常重要的元素，能够用于绘制各种图形和动画效果。获取画布的宽度和高度是我们经常需要用到的操作之一。那么，在本文中，我们将深入探讨如何通过 JavaScript 获得 HTML5 画布的宽度和高度。
使用 offsetWidth 和 offsetHeight 属性
offsetWidth 和 offsetHeight 属性可以用来获取一个元素的宽度和高度，包括元素的边框(border)、内边距(padding)和滚动条(scrollbar)（如果存在的话）的宽度和高度。对于 HTML5 画布而言，我们可以使用这两个属性来获取画布的宽度和高度。
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ------------- ----- --- -------------- ------- ------ ------- ----------------------- -------- --- ------ - ------------------------------------ --- ----------- - ------------------- --- ------------ - -------------------- ------------------- ------ - - ------------- ------------------- ------- - - -------------- --------- ------- -------展开代码
在上面的示例代码中，我们通过 document.getElementById 方法获取了 id 为 myCanvas 的 canvas 元素，并使用 offsetWidth 和 offsetHeight 属性来获取其宽度和高度，并将结果输出到控制台。
需要注意的是，通过 offsetWidth 和 offsetHeight 获取到的宽度和高度不包括 CSS 的 border、padding 和 margin 属性。
使用 clientWidth 和 clientHeight 属性
clientWidth 和 clientHeight 属性也可以用来获取元素的宽度和高度，但是不包括元素的边框(border)和滚动条(scrollbar)的宽度和高度。对于 HTML5 画布而言，我们同样可以使用这两个属性来获取画布的宽度和高度。
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ------------- ----- --- -------------- ------- ------ ------- ----------------------- -------- --- ------ - ------------------------------------ --- ----------- - ------------------- --- ------------ - -------------------- ------------------- ------ - - ------------- ------------------- ------- - - -------------- --------- ------- -------展开代码
在上面的示例代码中，我们同样通过 document.getElementById 方法获取了 id 为 myCanvas 的 canvas 元素，并使用 clientWidth 和 clientHeight 属性来获取其宽度和高度，并将结果输出到控制台。
需要注意的是，通过 clientWidth 和 clientHeight 获取到的宽度和高度不包括 CSS 的 border、padding 和 margin 属性，而且如果有滚动条存在的话，也不包括滚动条的宽度和高度。
使用 getBoundingClientRect 方法
getBoundingClientRect 方法可以用来获取一个元素相对于浏览器视口的位置和尺寸，包括元素的边框(border)、内边距(padding)和滚动条(scrollbar)（如果存在的话）的宽度和高度。对于 HTML5 画布而言，我们同样可以使用这个方法来获取画布的宽度和高度。
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ------------- ----- --- -------------- ------- ------ ------- ----------------------- -------- --- ------ - ------------------------------------ --- ---- - ------------------------------- --- ----------- - ----------- --- ------------ - ------------ ------------------- ------ - - ------------- ------------------- ------- - - -------------- --------- ------- -------展开代码
在上面的示例代码中，我们通过 document.getElementById 方法获取了 id 为 myCanvas 的 canvas 元素
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13091
