如何获取Canvas元素的两个高度值？已知style高度获取方法

Canvas元素有两个关键高度属性，对应你给出示例里的792和746：

• 页面显示高度：你已经掌握的canvas.style.height，获取的是CSS样式中设置的显示高度（示例里的746px）。
• 固有绘图高度：这是Canvas内部绘图缓冲区的高度，对应标签上的height属性值（示例里的792），可以通过两种方式获取：
  1. canvas.height：直接访问DOM元素的height属性，返回数值类型（比如792，不带单位）。
  2. canvas.getAttribute('height')：获取标签上的属性原始字符串值（返回"792"）。

简单代码示例：

const canvas = document.querySelector('canvas');
// 获取显示高度
const displayHeight = canvas.style.height; // "746px"
// 获取绘图高度（数值型）
const drawingHeight = canvas.height; // 792
// 获取绘图高度（字符串型）
const drawingHeightStr = canvas.getAttribute('height'); // "792"

根据你的实际需求选择对应的获取方式即可。

内容的提问来源于stack exchange，提问作者codingGuy