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

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是否已更改大小.如果有,则相应地调整画布大小.