为什么使用 HTML 5 Canvas 标签？答案

【问题标题】：Why use the HTML 5 Canvas tag?为什么使用 HTML 5 Canvas 标签？
【发布时间】：2011-09-09 13:23:18
【问题描述】：

请原谅我的无知，但我对 HTML 5 领域非常陌生，从未使用 Javascript 处理过图形。

我在阅读时遇到了 Canvas 标签，消息来源指出，canvas 标签充当图形容器，用于通过使用 Javascript 在网页上呈现图形。

我的问题是，为什么我需要使用 Canvas 作为占位符来渲染图形，而不是使用其他可以用作图形占位符的任意标签？

【问题讨论】：

【解决方案1】：

<canvas> 标记与<img> 标记完全相同，不同之处在于您可以使用 JavaScript 代码自己绘制图像，而不是从网络加载图像。您可以绘制线条、圆形、填充多边形、渐变和矩阵变换的图片。您还可以循环重绘画布内容以制作动画。

如果您的浏览器太旧且不支持画布，请查看at this small demo 或查看this video，看看您可以使用普通的 2d 画布做什么。

它是纯 javascript，没有从网络加载，一切都在浏览器中计算，包括用于 envmapping 部分的纹理和光线跟踪图像。全部在一个 4Kb html 文件中。

你真的认为你可以使用普通的<div>s 做同样的事情吗？

编辑：

如需更简单且源代码可读的演示，您可以查看this rotating icosahedron。

【讨论】：

现在这很酷 :) 我永远不会知道你可以在没有 3rd 方库的情况下进行这样的渲染。顺便说一句，我在哪里可以找到有关如何编写这些类型的渲染的教程？
在网络上——尝试搜索“HTML 5 canvas demo”之类的内容。
@Draco：好的……这是给你的秘密。 javascript 中的“第 3 部分库”只是由 javascript 代码组成。真的。您可以使用 javascript 编写任何 javascript“第 3 部分库”可以执行的操作。没有魔法……只有代码。在我的旧汇编程序环面演示中使用的技术可以追溯到通过绘制所有需要的像素在软件中完成 3D 渲染时使用的技术。 Javascript torus 使用实际上通常是硬件加速的 canvas 2d 原语。参见例如stackoverflow.com/questions/4774172/…

【解决方案2】：

Canvas 旨在用于图形操作，而 div 不是。从语义上讲，您应该使用Canvas。

【讨论】：

【解决方案3】：

您不能在任意元素上绘图。

【讨论】：

【解决方案4】：

Canvas 允许您以可接受的速度操作像素。您可以绘制各种形状，为像素设置颜色等。使用 div，您只能渲染标准 HTML 元素。

【讨论】：

【解决方案5】：

DIV 是其他标签的容器。 CANVAS 是一个像素容器。

虽然（可能）可以在普通的DIV 内以绘图方式做所有你想做的事情，但使用CANVAS，浏览器在语义上知道该区域将包含图形并可以相应地使用该信息。

浏览器原生支持CANVAS 的各种绘图例程，而对于DIV，您必须完全用JS 自己编写。

关于 HTML5 画布信息的一个非常好的资源是 http://diveintohtml5.ep.io/canvas.html

【讨论】：

【解决方案6】：

为什么使用画布：
1- 画布使用安全且与多平台兼容。
2-它有很多现成的功能可以在动画中使用。
3-你可以玩速度、像素、颜色。
4-您可以将画布的结果保存为图像。 5-您可以使用画布实现专业游戏。 check here

它只是像flash一样，但没有插件。

usefaul 要使用的库：
- easel js: 像库一样的闪存
- processing js : 开源动画库

【讨论】：

【解决方案7】：

绘图使用

<canvas>

进入使用此功能的网页时会立即加载，其中

<img>

需要更长的时间。

【讨论】：