HTML5 キャンバス サイズ: CSS または属性 – 正確な描画を保証する方法はどれですか?

HTML5 キャンバスのサイズの不一致: CSS と属性

HTML5 キャンバスの作成において、サイズ属性を直接設定するとさまざまな結果が発生する可能性があります。またはカスケード スタイル シート (CSS) を使用します。次のコード スニペットを考えてみましょう:

<style>
#canvas {
    width: 800px;
    height: 600px;
}
</style>
<canvas></canvas>

この CSS 主導のアプローチでは、ズーム時にキャンバスが拡大縮小されます。対照的に、属性を直接設定すると期待される結果が生成されます:

<canvas></canvas>

この矛盾を説明するには、次の 2 つの要素の異なる役割を理解することが重要です:

• Canvas 要素の属性 (幅、高さ): これらの属性は、キャンバスの実際のサイズをピクセル単位で指定し、その範囲内で描画できるようにします。寸法。指定しない場合、HTML5 仕様に従って、デフォルトの解像度は 300 ピクセル x 150 ピクセルです。
• CSS プロパティ (幅、高さ): これらのプロパティは、キャンバス要素が画面上に表示されるサイズを決定します。設定されていない場合、要素の固有のパラメータ (属性によって決定される) がそのレイアウトに影響します。

CSS の寸法が実際のキャンバスの寸法と異なる場合、ブラウザは目的の表示に合わせてキャンバスを拡大縮小する必要があります。サイズ。アスペクト比が維持されないと、歪みが生じる可能性があります。この動作の実際の例は、http://jsfiddle.net/9bheb/5/ から入手できます。

したがって、キャンバス サイズを設定するときは、望ましい結果を慎重に検討することが重要です。正確で歪みのない描画を行うには、CSS プロパティのみに依存するのではなく、キャンバス要素の属性を使用して寸法を直接指定することをお勧めします。

以上がHTML5 キャンバス サイズ: CSS または属性 – 正確な描画を保証する方法はどれですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。