drawImage（）和<img>標記

Question

我得到了與HTML5聲明。

當我將圖片加載到瀏覽器上時，我可以使用普通的HTML <img>標籤，而在HTML5中，我也可以使用 - canvas- drawImage（）。

我不知道在瀏覽器中加載網頁時，<img>和drawImage()之間有什麼區別。

任何人都可以讓我清楚？

Answer 1

<img>標記獲取圖像源並將其放置在您的DOM中。的DOM元素然後可以從你的文檔對象模型選擇具有JavaScript並且它可以被修改（屬性可以被添加或移除，源可以被改變，等等）

drawImage()取像素數據和可視化它在一個<canvas>元件。之後只有canvas元素可以與（與javascript選擇）交互。像素數據可以修改，但不能像使用<img>標籤那樣利用像title,alt等開箱即用的屬性。

如果您只想簡單地在網頁中呈現圖像，請使用<img>標記。如果要在渲染完圖像後與要處理的圖像進行交互，並且要對像素數據執行修改（例如，在圖像頂部繪製），請使用<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