画布扭曲绘图。如何获得设置尺寸和样式尺寸之间的比例因子？
我有这个画布：
<canvas id="game" width="280" height="280"></canvas>
css 通过以下方式设置画布样式：
canvas
{
width: inherit;
height: 280px;
}
由于宽度可以改变，画布会扭曲绘图。我需要知道如何弥补这一点。有人可以帮助我吗？
I have this canvas:
<canvas id="game" width="280" height="280"></canvas>
The css styles the canvas via:
canvas
{
width: inherit;
height: 280px;
}
As the width can change, the canvas distorts the drawing. I need to know how to compensate for this. Anyone who can help me?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
Mozilla Bespin 团队也遇到了同样的问题。 （当他们使用 Canvas 时，在它与 Ace 合并之前）
不要给 Canvas 任何 CSS 宽度/高度规则。这样做通常会很痛苦。将 Canvas 放入仅包含一个内容的 Div 中（画布本身）
当 canvas-parent div 更改大小时，更改画布的大小（canvas.width 和 canvas.height）以匹配 div 的大小。
由于大多数浏览器在 div 大小更改时不会触发事件，因此您只需每隔半秒用计时器检查一次，看看 div 大小是否已更改。如果有，则相应地调整画布大小。
This is the same problem that the Mozilla Bespin team ran into. (back when they were using Canvas, before it merged with Ace)
Don't give the Canvas any CSS width/height rules. Doing so usually ends up as a pain. Put the Canvas in a Div that only has a single thing in it (the canvas itself)
As the canvas-parent div changes size, change the size of the canvas (canvas.width and canvas.height) to match the size of the div.
Since most browsers do not fire an event when a div changes size, you'll simply have to check, say, every half second with a timer to see if the div has changed size. If it has, then you resize the canvas accordingly.