HTMLCanvasElement: height 属性

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来,各浏览器均已提供此特性。

HTMLCanvasElement.height 属性是一个正整数,用于反映 height HTML 属性在 CSS 像素中解释的 <canvas> 元素。当未指定该属性,或将其设置为无效值(例如负数)时,将使用默认值 150

设置 height 属性会重置整个渲染上下文到其默认状态。这包括清除画布(后备缓冲区)、重置当前路径,以及重置所有属性,如 fillStyleglobalCompositeOperation。此重置适用于所有上下文类型,即使在将 height 设置为其当前值时也会发生。要更改高度后恢复之前的画布内容,请使用 CanvasRenderingContext2D.getImageData()CanvasRenderingContext2D.putImageData()。必须单独跟踪和恢复上下文属性。

这是控制画布大小的两个属性之一,另一个是 HTMLCanvasElement.width

一个数字。

示例

给定此 <canvas> 元素

html
<canvas id="canvas" width="300" height="300"></canvas>

您可以使用以下代码获取画布的高度

js
const canvas = document.getElementById("canvas");
console.log(canvas.height); // 300

规范

规范
HTML
# dom-canvas-height

浏览器兼容性

另见