html - drawImage() とタグ

Question

私はHTML5で述べられています。

ブラウザに画像を読み込むときは通常の HTML<img>タグを使用できますが、HTML5 では -canvas-drawImage() も使用できます。

ブラウザに Web ページをロードするとき <img>との違いがわかりません。drawImage()

誰でも私を明確にすることができますか？

Answer 1

タグは画像ソースを受け取り、それ<img>を DOM に配置します。次に、DOM 要素をドキュメント オブジェクト モデルから選択して、JavaScript変更することができます (属性を追加または削除したり、ソースを変更したりできます)。

drawImage()ピクセル データを取得し、<canvas>要素で視覚化します。その後、キャンバス要素のみを操作できます (javascript で選択)。ピクセル データは変更できますが、タグのようtitleにalt、 などの属性をすぐに利用することはできません。<img>

<img>Web ページ内で画像をレンダリングするだけの場合は、 タグを使用します。<canvas>レンダリング後に画像を操作し、ピクセル データに変更を加えたい (たとえば、画像の上に描画する) 場合は、 を使用します。

例：

<img>:

<!-- When hovered it would display a tooltip saying "This is an image" -->
<img id="test" src="some/src.png" alt="error" title="This is an image" />
<!-- The image will fit precisely in it's container -->

キャンバス：

// In this example if the canvas dimensions are larger/smaller
// than the image dimensions, the image will be clipped or
// it would not fill the entire space
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("test");
ctx.drawImage(img, 0, 0); // On hover nothing will show
// unless you implement a custom tooltip functionality