我有这个画布:
<canvas id="game" width="280" height="280"></canvas>
css通过以下方式设置样式:
canvas { width: inherit; height: 280px; }
由于宽度可以改变,画布会扭曲绘图.我需要知道如何弥补这一点.谁可以帮助我?
解决方法
这与Mozilla Bespin团队遇到的问题相同. (当他们使用Canvas时,在与Ace合并之前)
不要给Canvas任何CSS宽度/高度规则.这样做通常最终会带来痛苦.将Canvas放入一个只有一个东西的Div(画布本身)
当canvas-parent div改变大小时,更改画布的大小(canvas.width和canvas.height)以匹配div的大小.
由于大多数浏览器在div改变大小时不会触发事件,因此您只需用计时器检查每半秒,以查看div是否已更改大小.如果有,则相应地调整画布大小.