HTML5 キャンバスのサイズ設定: CSS または要素属性 – どちらの方法を使用する必要がありますか?

HTML5 キャンバス サイズの評価: CSS と要素属性

HTML5 では、キャンバス要素のサイズは CSS プロパティを通じて決定できます。または要素の属性。ただし、これらのアプローチでは異なる結果が得られるため、混乱が生じます。

結果の差異

CSS を使用してキャンバス サイズを定義すると、キャンバスが Web に合わせて縮小または拡張されます。ページが拡大または縮小されます。一方、幅や高さなどの要素属性を使用してキャンバス サイズを直接指定すると、ズーム レベルに関係なく一貫した表示が生成されます。

仕組みを理解する

違いを理解するには、次の点を考慮してください。

• CSS プロパティ は、画面上のキャンバスの視覚的表現。 CSS で幅と高さを設定するときは、キャンバスが表示されるサイズを定義しますが、描画に使用できる実際のピクセル数は定義しません。
• 要素属性 によって、キャンバスの内部サイズが決まります。キャンバス。描画に使用できる実際のピクセル解像度を定義します。デフォルトでは、指定されていないキャンバスの解像度は幅 300 ピクセル、高さ 150 ピクセルです。

実際的な意味

CSS サイズと要素属性サイズの区別実用的な意味があります:

• 特定の場所にキャンバスを表示する必要がある場合解像度を変更し、ズーム レベルに関係なくその解像度を維持するには、要素属性を使用してサイズを指定します。
• ズーム中にアスペクト比を維持しながらキャンバスを拡大縮小する場合は、CSS プロパティを使用してサイズを設定します。

視覚化

違いを説明するには、以下を参照してください。 http://jsfiddle.net/9bheb/5/ では、CSS サイズが 800px x 16px、要素属性サイズが 32px x 32px のキャンバスがズーム時にどのように異なる動作をするかを観察できます。

以上がHTML5 キャンバスのサイズ設定: CSS または要素属性 – どちらの方法を使用する必要がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。