前端4-2-10：Canvas与SVG之简介、对比总结

目录

【先言】

【题外话】

【问题】

1.定义

关于SVG(详见什么是SVG)

关于Canvas

2.两者区别

Canvas

SVG

对比列表

3.历史

4.功能

5.技术

---

【先言】

【题外话】

本来呢，就打算做完这套题呢该吃饭了，前面不定项选择都对了嘿，开心的，谁知道？后面？一看来了个“正确答案: A C   你的答案: B D (错误)”，哦豁！？！不得不吐槽下自己，伤感了，giao，不能吃饭的，都记的啥，都记反了？完美避开正确答案了，good服了，难道是？真的饿坏脑袋了吗？赶紧的，拿小本本记下先，罗里吧嗦的，www...

【问题】

以下说法中正确的是（）

A、canvas 中绘制的元素不可以通过浏览器提供的接口获取到。

B、SVG 中绘制的元素不可以通过浏览器提供的接口获取到。

C、html 中 A标签 target 属性的默认取值是 _self，默认在当前窗口打开。

D、为了优化网页的SEO效果，常用 javascript 动态生成网页的title、description、keyword。

正确答案: A C   你的答案: B D (错误)

 

---

【知识点：Canvas与SVG】

1.定义

• 关于SVG(详见什么是SVG)

  • SVG 可缩放矢量图形（Scalable Vector Graphics），基于可扩展标记语言XML 出来的时间比较老

SVG 用来定义用于网格的基于矢量的图形

• 关于Canvas

  • Canvas 是H5新出来的标签
  • Canvas画布，利用JavaScript在网页绘制图像
  • 在标签中给上宽高： 不用加单位
  • 如果在css中给宽高 会对图像造成拉伸 （默认宽高300px*150px）
  • 通过过去绘制工具 .getContext(“2d”) 来在画布中绘制图形

---

2.两者区别

下表列出了 canvas 与 SVG 之间的一些不同之处。

• Canvas

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

• SVG

1.     不依赖分辨率
2.     支持事件处理器
3.     最适合带有大型渲染区域的应用程序（比如谷歌地图）
4.     复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
5.     不适合游戏应用

• 对比列表

---

3.历史

• canvas是html5提供的新元素。
• svg存在的历史要比canvas久远，已经有十几年了。svg并不是html5专有的标签，最初svg是用xml技术（超文本扩展语言，可以自定义标签或属性）描述二维图形的语言。

---

4.功能

• canvas可以看做是一个画布，其绘制出来的图形为标量图。可以在canvas中引入jpg或png这类格式的图片。在实际开发中，大型的网络游戏都是用canvas画布做出来的，并且canvas的技术现在已经相当的成熟。另外，我们喜欢用canvas来做一些统计用的图表，如柱状图曲线图或饼状图等。
• svg，所绘制的图形为矢量图，不能引入普通的图片，因为矢量图的不会失真的特点，在项目中我们会用来做一些动态的小图标。这个特点也很适合被用来做地图，百度地图就是用svg技术做出来的。

---

5.技术

• canvas里面绘制的图形不能被引擎抓取，canvas中我们绘制图形通常是通过javascript来实现。
• svg里面的图形可以被引擎抓取，支持事件的绑定，svg更多的是通过标签来实现。我再来介绍一个svg的js库：TWO.JS。其中包含two.js和three.js前者用于绘制二维图形，后者用于绘制三维图形。TWO.JS可以支持三种格式，svg（默认）、canvas、和WEBGL。当然也可以在普通div中引入。

---

o了o了，学废了，两点了该系饭辽，下次再没记住得喝白开水了！！