html5の描画方法にはどのようなものがありますか

html5 での描画方法: 1. ピクセルに基づいて 2D 描画機能を提供し、HTML に依存し、スクリプトを通じてパターンを描画するキャンバスを使用します; 2. 一連のグラフィックを提供する SVG ベクター グラフィックを使用します。要素、静止画像表示、高保証ドキュメント表示および印刷アプリケーション シナリオに適しています。

このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。

html5 には Canvas と SVG という 2 つの描画方法があります。

Canvas と SVG はどちらも HTML5 で推奨される主要な 2D グラフィックス描画テクノロジです

Canvas とは

• &lt ;canvas&gt ; は H5 の新しいコンポーネントです。カーテンのようなものです。スクリプト (通常は Javascript) を使用してグラフィックスを描画できます。HTML 要素を使用できます。さまざまな図、表、アニメーションを作成します。
• Canvas テクノロジは比較的新しく、ラスター イメージ処理に重点を置いています。

SVG とは何ですか?

• SVG は、10 年以上にわたって W3C 標準となっている独立したベクター グラフィックス言語です。
• Extensible Markup Language XML に基づいています

#違い:

##Canvas はピクセルに基づいており、2D 描画機能を提供します。これは HTML に依存する HTML 要素タイプであり、スクリプトを通じてのみパターンを描画できます。
• #SVG はベクター画像であり、一連のグラフィック要素

  (四角形、パス、円、線...)

  を提供します。完全なアニメーションと時間メカニズムもあり、独立して使用することも、 HTMLに埋め込むことができます。

• キャンバスはピクセルごとにレンダリングされ、グラフィックスが完成すると、ブラウザーはそれを意識しなくなります。

• SVG は DOM 操作によって表示されます。

#機能比較:

• #Canvas はさらに独自の機能、ダイナミックなレンダリング、大容量の描画を提供します

##解像度に依存します##イベント ハンドラーをサポートしません

• ##キャンバスはピクセルごとにレンダリングされます。描画が完了すると、ブラウザは注目しなくなるため、テキストのレンダリング能力が弱くなります。

• 結果の画像は .png または .jpg 形式で保存できます

• Canvas は、頻繁に再描画する必要がある多くのオブジェクトを含むグラフィックスを多用するゲームに最適です

• 狭い領域、多数のシーンに適しています

• SVG はより完全な機能を備えており、静止画像の表示、高保証のドキュメント表示および印刷アプリケーション シナリオに適しています。

• 解像度に依存しません

サポートイベントハンドラーSVG は DOM 操作を通じて表示され、最適ですレンダリング領域が大きいアプリケーション (Google マップなど) の場合

• #複雑さが高いとレンダリング速度が遅くなります (DOM を過度に使用するアプリケーションは高速ではありません)

• SVG は DOM 操作により複雑さが高く、ゲームアプリケーションでは描画速度が遅くなるため不向きです

• 大きなサイズのシーンに適しています面積も少量も。モバイル プラットフォームでのレンダリングには SVG を優先することを強くお勧めします。

• 関連するおすすめ: 「

  html ビデオ チュートリアル

  」

以上がhtml5の描画方法にはどのようなものがありますかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。