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