css - キャンバスは描画をゆがめます。セット サイズとスタイル サイズの間の倍率を取得するにはどうすればよいですか?

Question

私はこのキャンバスを持っています:

<canvas id="game" width="280" height="280"></canvas>

css は次の方法でキャンバスのスタイルを設定します。

canvas
{
    width: inherit;
    height: 280px;
}

幅が変わる可能性があるため、キャンバスは描画をゆがめます。これを補う方法を知る必要があります。誰でも私を助けることができますか？

Answer 1

これは、MozillaBespinチームが遭遇したのと同じ問題です。（Canvasを使用していたとき、Aceとマージする前）

CanvasにCSSの幅/高さのルールを指定しないでください。そうすることは、通常、苦痛として終わります。キャンバスを、1つだけのDiv（キャンバス自体）に配置します

キャンバスの親divのサイズが変更されたら、キャンバスのサイズ（canvas.widthとcanvas.height）をdivのサイズに一致するように変更します。

ほとんどのブラウザは、divのサイズが変更されたときにイベントを発生させないため、たとえば、タイマーで0.5秒ごとに、divのサイズが変更されたかどうかを確認する必要があります。ある場合は、それに応じてキャンバスのサイズを変更します。