html - 我应该用 canvas 元素替换所有 img 元素吗？

Question

我是 html5 的 canvas 元素的新手。我特别想知道何时应该将现有的 img 元素放在画布元素中。

这样做有什么好处或适当的用途？

我一直在阅读Dive into HTML 5并没有完全明白我在他们关于画布主题的结论性声明中所寻找的内容：

简单的答案是，出于同样的原因，您可能想在画布上绘制文本。画布坐标图包括文字、线条和形状；画布上的文字只是更大作品的一部分。更复杂的图表可以轻松地使用 drawImage() 来包含图标、精灵或其他图形。

Answer 1

工作在哪里img，使用它。canvas确实是一个非常强大的工具，但是：

1. 虽然今天大部分浏览器都支持它，img但仍然得到更广泛的支持。
2. 如果您需要迎合禁用 JavaScript 的用户，canvas则无法使用；canvas需要 JavaScript 才能运行，img而不需要。

也就是说，如果您需要一些只能canvas做的事情，请随意。例如：

• 您是否需要加载图像，然后让用户对其进行变形或绘图？Acanvas在那里会做得很好。
• 是否需要动态绘制一些图表和图形？canvas在那里也能很好地工作。

但是，当您不需要更高级的功能canvas而只需要显示图像时，img这是最明显和兼容的选择。

Answer 2

图像标签最适合用于静态图像。

引用 HTML5 工作组的话，Canvas 是“一种依赖于分辨率的位图画布，可用于动态渲染图形、游戏图形或其他视觉图像。”

因此，您可以将图像贴在画布上，但这可能是为了增强您正在创建的其他一些作品，例如图表或游戏图形。

更新后更新

因此，如果您想创建一个实时跟踪股票表现的非常复杂的图表，您可以使用画布绘制图表的各个条形图，然后还使用 drawImage() 在画布上放置公司徽标以表示哪个酒吧属于哪个酒吧。