css - HTML5 获取缩放的 Canvas 大小

Question

我的 CSS 是这样的:

#Canvas {
width: 100%;
max-width: 548px;
height: auto;
}

它会按我想要的方式缩放我的图像。

然而，当我调用 canvas.width 时，即使我的浏览器窗口非常小，它也会始终返回相同的宽度。为什么我无法从 canvas 获取尺寸？

我需要尺寸，因为我通过 startX = percentX * canvas.width 检查 mouse hover这是不正确的，因为 canvas.width 是静态的。

干杯!

Answer 1

canvas 元素有它自己的 width 和 height 属性，所以编辑 width 和 css 中的 height 只会缩放它，但 canvas 的属性将保持不变。因此，要更改 canvas 大小，您必须通过 JavaScript 使用 onresize 函数调整它的大小。