css – Canvas扭曲绘图.如何获得设置大小和样式大小之间的比例因子?

前端之家收集整理的这篇文章主要介绍了css – Canvas扭曲绘图.如何获得设置大小和样式大小之间的比例因子?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有这个画布:
<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是否已更改大小.如果有,则相应地调整画布大小.

猜你在找的CSS相关文章