我已将问题简化为带有元素的基本 HTML 文档<canvas>：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
border: 1px solid #ff5500;
background-color: black;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="canv" style='width:1024px;height:768px'>
</canvas>
</body>
</html>
但是，无论我设置width和height（使用像素、百分比或视口单位），无论我是否设置样式（例如style='width:1024px;height:768px'），无论我如何调整浏览器窗口的大小，开发控制台始终将宽度 x 高度报告为 300x150。为什么会这样，我该如何处理？
这是开发控制台的输出：
var c = document.getElementById("canv");
undefined
c.style.width
"1024px"
c.style.height
"768px"
c.width
300
c.height
150
Chromium 和 Firefox 中都会出现相同的行为。
我已经搜索了 Stack Overflow 和整个网络，发现了很多关于width和之间的区别clientWidth，以及关于 Fabric.js 的类似问题，但没有回答这个具体问题。
我认为你所指的宽度和高度是html 属性而不是 css。
它们可以这样修改；
<canvas width="1024" height="768" style="border:1px solid black;">
</canvas>| 归档时间： |
|
| 查看次数： |
2852 次 |
| 最近记录： |