画布标签在HTML5中如何发挥作用?

画布标签在HTML5中如何发挥作用?,html,Html,我是一个初级开发人员,我不明白canvas标签对我们有什么好处? 我读了很多关于这方面的文章,但我无法从canvas标签中获得根本好处。基本上,多亏了canvas,我们现在可以使用HTML5和canvas API绘制/渲染2D形状 作为canvas现在可能实现的一个示例,将canvas和svg之间的区别想象为Photoshop和Illustrator(或者对于OSS用户来说Gimp和Inkscape)之间的区别。一个涉及位图,另一个涉及矢量艺术 使用画布,因为您是在位图中绘制的,所以您可以轻松地

我是一个初级开发人员,我不明白canvas标签对我们有什么好处?
我读了很多关于这方面的文章,但我无法从canvas标签中获得根本好处。

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


作为canvas现在可能实现的一个示例,

将canvas和svg之间的区别想象为Photoshop和Illustrator(或者对于OSS用户来说Gimp和Inkscape)之间的区别。一个涉及位图,另一个涉及矢量艺术

使用画布,因为您是在位图中绘制的,所以您可以轻松地对图像进行涂抹、模糊、刻录和减淡。但是,由于它是位图,您无法轻松绘制一条线,然后决定重新定位该线。您需要删除旧直线,然后绘制新线

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


有时它们的用例重叠。像许多人一样,使用画布绘制简单的线条,并在javascript中将对象作为数据结构进行跟踪。但实际上,它们都有不同的用途。如果您试图在画布上用纯javascript实现通用矢量绘图,我怀疑您会比使用svg更快,svg很可能是用C实现的。

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

画布的一些可能用途:

  • 图像绘制程序
  • 照片编辑/处理
  • 2D游戏
  • 高级图像查看,例如

如果你不能理解它是如何有益的,那么至少从你的角度来看,可能不是这样。不要认为,因为它就在那里,我必须以某种方式使用它,根据您尝试构建的内容选择适合您的技术,例如,一个会计web应用程序可能不需要画布。

我想到的酷项目是:

  • 可视化gps数据。GPS数据只是坐标的XML列表。你可以很容易地在画布上构建一些东西来“连接点”
  • 一个移动应用程序,用户可以用手指实际签署一个文档-画布允许您将渲染的画布图形导出到PNG,并保存在服务器上
  • 在你有化身的游戏中,你可以允许用户在化身上实际绘制。有人留胡子吗
其他材料:

  • 在iOS/Android中使用大量CSS3 长方体阴影等效果可能导致 表现不佳,尤其是在 动画制作。你可以做很多这样的事情 单个画布标记中的图形, 下面是一个例子: . 这个东西在ipad上是完美的
  • 很酷的背景效果。例如,试着去保罗·爱尔兰餐厅 站点并将光标移动到 背景:
  • 在这本由谷歌赞助的HTML5书中,很多特效都在使用 画布: - 尤其是“翻页” 动画

我个人对画布的看法(当我真正找到画布的用例时)是能够在画布元素中按像素进行颜色选择和颜色更改-实际上是将图像从我们不知道其内部发生了什么的内容移动到像所有其他DOM元素一样的元素(是的,我知道canvas和DOM目前存在的问题——我确信这将在将来得到解决)


当然-canvas让一些动画变得更简单,而且没有插件,但我们以前可以这样做(主要是使用flash)-我认为真正重要的是能够知道页面上发生了什么。

我想你不是在要求更多关于它的功能或如何使用它的描述,因为这听起来像你已经读过的。你是在要求具体的用例来帮助解释(证明?)为什么添加了
canvas
标记吗?