html - drawImage() 和标签

Question

我正在使用 HTML5 进行说明。

当我将图像加载到浏览器上时，我可以使用普通的 HTML<img>标签，而在 HTML5 中，我还可以使用 -canvas-drawImage()。

我不知道在浏览器中加载网页 之间<img>和何时有什么区别。drawImage()

谁能帮我说清楚？？？

Answer 1

该<img>标签获取一个图像源并将其放置在您的 DOM 中。然后可以从您的文档对象模型中选择 DOM 元素JavaScript并对其进行修改（可以添加或删除属性，可以更改源等）

drawImage()获取像素数据并将其可视化为<canvas>元素。之后，只能与 canvas 元素交互（使用 javascript 选择）。像素数据可以修改，但您不能像使用标签一样使用开箱即用的属性，如 、 等title。alt<img>

<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