如何获得 HTML5 画布的宽度和高度？-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，HTML5 画布 canvas 是一个非常重要的元素，能够用于绘制各种图形和动画效果。获取画布的宽度和高度是我们经常需要用到的操作之一。那么，在本文中，我们将深入探讨如何通过 JavaScript 获得 HTML5 画布的宽度和高度。

使用 offsetWidth 和 offsetHeight 属性

offsetWidth 和 offsetHeight 属性可以用来获取一个元素的宽度和高度，包括元素的边框(border)、内边距(padding)和滚动条(scrollbar)（如果存在的话）的宽度和高度。对于 HTML5 画布而言，我们可以使用这两个属性来获取画布的宽度和高度。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Canvas Width and Height</title>
</head>
<body>
    <canvas id="myCanvas"></canvas>
    <script>
        var canvas = document.getElementById("myCanvas");
        var canvasWidth = canvas.offsetWidth;
        var canvasHeight = canvas.offsetHeight;
        console.log("Canvas width: " + canvasWidth);
        console.log("Canvas height: " + canvasHeight);
    </script>
</body>
</html>

在上面的示例代码中，我们通过 document.getElementById 方法获取了 id 为 myCanvas 的 canvas 元素，并使用 offsetWidth 和 offsetHeight 属性来获取其宽度和高度，并将结果输出到控制台。

需要注意的是，通过 offsetWidth 和 offsetHeight 获取到的宽度和高度不包括 CSS 的 border、padding 和 margin 属性。

使用 clientWidth 和 clientHeight 属性

clientWidth 和 clientHeight 属性也可以用来获取元素的宽度和高度，但是不包括元素的边框(border)和滚动条(scrollbar)的宽度和高度。对于 HTML5 画布而言，我们同样可以使用这两个属性来获取画布的宽度和高度。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Canvas Width and Height</title>
</head>
<body>
    <canvas id="myCanvas"></canvas>
    <script>
        var canvas = document.getElementById("myCanvas");
        var canvasWidth = canvas.clientWidth;
        var canvasHeight = canvas.clientHeight;
        console.log("Canvas width: " + canvasWidth);
        console.log("Canvas height: " + canvasHeight);
    </script>
</body>
</html>

在上面的示例代码中，我们同样通过 document.getElementById 方法获取了 id 为 myCanvas 的 canvas 元素，并使用 clientWidth 和 clientHeight 属性来获取其宽度和高度，并将结果输出到控制台。

需要注意的是，通过 clientWidth 和 clientHeight 获取到的宽度和高度不包括 CSS 的 border、padding 和 margin 属性，而且如果有滚动条存在的话，也不包括滚动条的宽度和高度。

使用 getBoundingClientRect 方法

getBoundingClientRect 方法可以用来获取一个元素相对于浏览器视口的位置和尺寸，包括元素的边框(border)、内边距(padding)和滚动条(scrollbar)（如果存在的话）的宽度和高度。对于 HTML5 画布而言，我们同样可以使用这个方法来获取画布的宽度和高度。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Canvas Width and Height</title>
</head>
<body>
    <canvas id="myCanvas"></canvas>
    <script>
        var canvas = document.getElementById("myCanvas");
        var rect = canvas.getBoundingClientRect();
        var canvasWidth = rect.width;
        var canvasHeight = rect.height;
        console.log("Canvas width: " + canvasWidth);
        console.log("Canvas height: " + canvasHeight);
    </script>
</body>
</html>

在上面的示例代码中，我们通过 document.getElementById 方法获取了 id 为 myCanvas 的 canvas 元素

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/13091