画布扭曲绘图。如何获得设置大小和样式大小之间的比例因子？

Question

我有这个画布：

<canvas id="game" width="280" height="280"></canvas>

css通过以下方式设置画布样式：

canvas
{
    width: inherit;
    height: 280px;
}

由于宽度可能会发生变化，因此画布会扭曲绘图。我需要知道如何弥补这一点。任何可以帮助我的人？​​

Answer 1

这与Mozilla Bespin团队遇到的问题相同。 （当他们使用Canvas时，在与Ace合并之前）

不要给Canvas任何CSS宽度/高度规则。这样做通常会让人痛苦。将Canvas放在一个只有一个东西的Div中（画布本身）

当canvas-parent div改变大小时，更改画布的大小（canvas.width和canvas.height）以匹配div的大小。

由于大多数浏览器在div改变大小时不会触发事件，因此您只需用计时器检查每半秒，以查看div是否已更改大小。如果有，则相应地调整画布大小。