Question

我用HTML5说明了。

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

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

任何人都可以让我清楚???

Answer 1

<img>标记获取图像源并将其放入DOM中。然后可以使用JavaScript从文档对象模型中选择DOM元素，并且可以对其进行修改（可以添加或删除属性，可以更改源等）。

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

drawImage（）和<img/>标记

1 个答案: