CanvasとDOMの違い - HTML5で最も効率的な画像表示方法は何ですか？

Question

StackOverflowのユーザ

HTML5のアプリケーション/ウェブサイトをしながら、多数の画像を順次又はブラウザで同時に表示される画像ギャラリー、などの場合のために、正当化キャンバス要素の使用であります？

イメージを表示することだけを話している限り、DOM要素< img>タグを使用する代わりに、キャンバスを使用してその上にイメージを描画するという点はありますか？ CSS3の変換/移動/拡大縮小/ズームやジェスチャ認識（ドラッグ、タッチ/タップ、多分ピンチなど）のような画像操作もあります。私の知る限り、キャンバスとimgタグ。

できるだけ多くのことを「html5」とし、パフォーマンスを考慮する必要があります。 たとえば、キャンバス要素が今後ブラウザで使用され、最適化されるようになり、img>がはるかに高速であれば問題になります。

私たちは普遍的なhtml5アプリケーションの開発、デスクトップやモバイルデバイスの開発を検討しているので、パフォーマンスとスピードは非常に重要な要素です。しかし、キャンバスと< img>を比較したテストでは、主にJavaScriptブラウザのゲームをターゲットにしていました。この場合、アニメーションはメモリ消費と全体的なパフォーマンスとしてそれほど重要ではありません。

この特定の側面に関するリソースやスタディはありますか？

Answer 1

UseCanvas = NeedCanvas ? true : false 

この操作には実際にキャンバスは必要ありません。キャンバスで開発するには、はるかに複雑なので、時間がかかります。

<img>とjavascriptを一緒に使用すると、互換性は向上しますが、速度とアクセシビリティは向上します。ブラウザを使用するとすべてがCSSとJavascriptを実行できます。また、SEO要因もあります。キャンバス内の画像がインデックスに登録されないことは間違いありません。

HTML5テクノロジを使用するためにHTML5テクノロジを使用しないでください。画像のワーピングを開始して、ユーザーが描画してエクスポート/保存できるようにするには、その場所にキャンバスが必要です。