Javascript Object.height返回半高

我有一个画布，我试图通过JavaScript获得它的高度，但它返回的是实际高度的一半

下面是我正在使用的简单代码

var canvas=document.getElementById（“时钟”）；
var context=canvas.getContext（“2d”）；
document.getElementById（“status”）.innerHTML=canvas.height；
控制台.日志（画布.高度）
canvas#时钟{
宽度：300px；
高度：300px；
边框：D50003 1px实心；
背景：#1e；
}
画布的宽度和高度不是由CSS设置的，而是由画布的
宽度
和
高度
属性设置的。你看到的是150，因为这是默认高度。发件人：

HtmlCanvaElement.height属性是一个正整数，反映了以CSS像素解释的元素的高度HTML属性。如果未指定属性，或者将其设置为无效值（如负值），则使用默认值150

CSS宽度和高度定义画布所占的布局空间。如果它们与画布大小不匹配，画布将缩放以填充布局空间。例如，您在代码中所做的是获取一个300x150画布（默认尺寸）并拉伸它以填充一个300x300区域

虽然您可以使用
getComputedStyle
获得CSS应用的高度：

var height = getComputedStyle(canvas).height; // "300px"

…这不是画布的高度，而是它在布局中所占的高度

如果在画布上设置宽度和高度，则会返回这些值（如果它们与CSS匹配，则不会拉伸/压缩图形）：


var canvas=document.getElementById（“时钟”）；
var context=canvas.getContext（“2d”）；
document.getElementById（“status”）.innerHTML=canvas.height；
控制台.日志（画布.高度）
canvas#时钟{
宽度：300px；
高度：300px；
边框：D50003 1px实心；
背景：#1e；
}

您没有将高度设置到
画布的任何位置，因此返回默认高度150px。默认大小为300x150。对于画布，您需要使用内联
width/height
属性或使用类似javascript的
canvas.width=300设置大小。我在csscan中将高度设置为300px，如果我使用css应用高度，我可以从任何方法获取高度值