黑马程序员技术交流社区

标题: 别看很基础你弄明白HTML5画布和SVG的不同了吗？ [打印本页]

作者: wizong 时间: 2016-6-25 18:35
标题: 别看很基础你弄明白HTML5画布和SVG的不同了吗？
  Canvas和SVG都允许您在浏览器中创建图形，但是它们在根本上是不同的。

SVG
SVG 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas
Canvas通过JavaScript来绘制2D图形。
Canvas是逐像素进行渲染的。
在canvas中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

Canvas与SVG的比较，下面列出了canvas与SVG之间的一些不同之处。

Canvas
依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG
不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用
详细解读Canvas
HTML5 中最让人兴奋的特性是 canvas — 那个用来作画的东东。在你的页面中插入 canvas 就像插入其他标记一样平常，但你将需要一些编程的经验来绘制形状、图表、动画、游戏、图片作品等。

兼容性
在除 IE 外的所有现代浏览器（Firefox 3, Safari 3.1, Chrome 2, and Opera9.6）都支持 Canvas。你可以使用 ExplorerCanvas 这个 Javascript 解决方案来为 IE 添加这个新特性。
canvas 标签只是图形容器，您必须使用脚本来绘制图形。

canvas 的历史
这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。
canvas 标记由 Apple 在 Safari 1.3 Web 浏览器中引入。对 HTML 的这一根本扩展的原因在于，HTML 在 Safari 中的绘图能力也为 Mac OS X 桌面的Dashboard 组件所使用，并且 Apple 希望有一种方式在 Dashboard 中支持脚本化的图形。
Firefox 1.5 和 Opera 9 都跟随了 Safari 的引领。这两个浏览器都支持 canvas 标记。
我们甚至可以在 IE 中使用 canvas 标记，并在 IE 的 VML 支持的基础上用开源的 JavaScript 代码（由 Google 发起）来构建兼容性的画布。
canvas 的标准化的努力由一个 Web 浏览器厂商的非正式协会在推进，目前 canvas 已经成为 HTML 5 草案中一个正式的标签。

canvas 标记和 SVG 以及 VML 之间的差异
canvas 标记和 SVG 以及 VML 之间的一个重要的不同是，canvas 有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。
这两种方式在功能上是等同的，任何一种都可以用另一种来模拟。从表面上看，它们很不相同，可是，每一种都有强项和弱点。例如，SVG 绘图很容易编辑，只要从其描述中移除元素就行。
要从同一图形的一个 canvas 标记中移除元素，往往需要擦掉绘图重新绘制它。使用 canvas 标记绘制简单图形
大多数 Canvas 绘图 API 都没有定义在 canvas 元素本身上，而是定义在通过画布的 getContext 方法获得的一个“绘图环境”对象上。
Canvas API 也使用了路径的表示法。但是，路径由一系列的方法调用来定义，而不是描述为字母和数字的字符串，比如调用 beginPath 和 arc 方法。
一旦定义了路径，其他的方法，如 fill，都是对此路径操作。绘图环境的各种属性，比如 fillStyle，说明了这些操作如何使用。

作者: xie-hcj 时间: 2016-6-25 20:43
这是很基础的东西吗？可能是我还没有学习到吧！没有看懂过

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2