Question

我的css看起来像这样：

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

它可以根据我的需要扩展我的图像。

然而，当我呼叫canvas.width时，即使我的浏览器窗口非常小，它也将始终返回相同的宽度。为什么我无法从canvas获得大小？

我需要大小，因为我mouse hover检查了startX = percentX * canvas.width 这是不正确的，因为canvas.width是静态的。

干杯！

Answer 1

canvas元素拥有自己的width和height属性，因此修改width中的height和css只会扩展它但canvas'属性将保持不变。因此，要更改canvas尺寸，您必须使用JavaScript函数onresize调整其大小。

Answer 2

您可以使用canvas.scrollWidth获取width。运行code snippet 在Full Page

＆＃13;

function getWidth()
{
    var can = document.getElementById("myCanvas");
    var wid = can.scrollWidth;
    alert(wid);
}

＆＃13;

#myCanvas {
width: 100%;
max-width: 548px;
height: auto;
border: 1px solid red;
}

＆＃13;

<canvas id="myCanvas"></canvas>

<input type="button" value="Get Width"  onclick="getWidth()"/>

＆＃13;