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

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 是否更改了大小。如果有，那么您相应地调整画布的大小。