canvas标签如何在HTML5中受益？

Question

我是初级开发人员我无法理解canvas标签对我们有什么好处？ 我阅读了很多文章，但是我无法从canvas标签中获得根本好处。

Answer 1

将canvas和svg之间的区别想象为Photoshop和Illustrator（或者适用于OSS人员的Gimp和Inkscape）之间的区别。一个处理位图和另一个矢量艺术。

使用画布，由于您使用位图绘图，因此可以轻松涂抹，模糊，刻录，躲避图像。但由于它是位图，因此您无法轻松绘制线条，然后决定重新定位线条。您需要删除旧行，然后绘制一个新行。

使用svg，由于您正在绘制矢量，因此您可以轻松地移动，缩放，旋转，重新定位，翻转图形。但由于它是矢量，因此无法根据线条粗细轻松模糊边缘，也无法将红色圆圈无缝融合成蓝色方块。您需要通过在对象之间绘制中间多边形来模拟模糊。

有时他们的用例重叠。就像很多人使用canvas来做简单的线条图并在javascript中跟踪对象作为数据结构。但实际上，它们都有不同的用途。如果你试图在画布上用纯javascript实现通用矢量绘图，我怀疑你比使用最有可能在C中实现的svg更快。

Answer 2

基本上，多亏了canvas，我们现在可以使用HTML5和canvas API绘制/渲染2D形状。

作为现在使用canvas的可能示例see this

Answer 3

Canvas的一些可能用途：

• 图像绘制程序
• 照片编辑/操作
• 2D游戏
• 高级图片查看，例如Microsoft's Deep Zoom

如果你无法理解它是如何有益的，那么也许至少不是你的观点。不要认为因为它在那里我必须以某种方式使用它，根据你想要构建的东西选择和选择适合你的技术，例如，Accounting web app可能不需要画布。

Answer 4

画布将使您能够绘制像素完美的图形。

Answer 5

我想到的很酷的项目是：

• 可视化gps数据。 GPS数据只是一个XML坐标列表。你可以在画布上轻松地构建一些东西来“连接点”。
• 用户可以用手指实际签署文档的移动应用程序 - 画布允许您将渲染的画布图形导出到PNG，然后将其保存在服务器上。
• 在拥有头像的游戏中，您可以允许用户实际绘制头像。有人髭吗？

其他东西：

• 在使用大量CSS3的iOS / Android中 盒子阴影之类的效果可以导致 表现不佳，特别是当 动画。你可以做很多这些 单个画布标签中的图形， 这是一个例子： http://everytimezone.com/。这件事在ipad上完美无缺。
• 酷背景效果。例如，尝试去Paul Irish's 站点并移动光标 背景：http://paulirish.com/
• 在由Google赞助的这本HTML5书中，很多效果都在使用 帆布： http://www.20thingsilearned.com/ - 特别是“翻页” 动画。

Answer 6

我个人对画布的看法（当我真正找到画布的用例时）是能够在画布元素中对每个像素进行颜色选择和颜色更改 - 实际上是从我们没有任何信息的图像中移动图像它内部发生的事情就像所有其他DOM元素一样（是的，我知道canvas和DOM当前存在的问题 - 确保将来会对此进行处理）

肯定 - 画布使某种动画更容易和无插件，但我们之前可以做（主要是使用闪光灯） - 我认为真正重要的是能够知道页面上发生了什么。