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

灰太狼 2022-11-15 15:51 170阅读 0赞

**目录**

【先言】

【题外话】

【问题】

1.定义

关于SVG(详见什么是SVG)

关于Canvas

2.两者区别

Canvas

SVG

对比列表

3.历史

4.功能

5.技术

--------------------

## 【先言】 ##

### 【题外话】 ###

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

![黄夏温gif表情包合集 你现在有什么可拽的][gif_]

### **【问题】** ###

**以下说法中正确的是（）**

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]) ###
    
     *  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.      不适合游戏应用

*  ### 对比列表 ###

![70][]

![70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxNTY2OQ_size_16_color_FFFFFF_t_70][]

--------------------

## 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了，学废了，两点了该系饭辽，下次再没记住得喝白开水了！！

![干饭表情包][b95ccdc9645001d523e9d90db8e66abb.gif]

[gif_]: /images/20221022/534bb1c0db3c46329585b3f0b8a697be.png
[SVG]: https://blog.csdn.net/weixin_44015669/article/details/115359663?spm=1001.2014.3001.5501
[70]: /images/20221022/5e6c3f57902b486b9620f27bb2a81f06.png
[70 1]: /images/20221022/ee90c40a18b345b485b6bb0e0dce0d7a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxNTY2OQ_size_16_color_FFFFFF_t_70]: /images/20221022/db91c0d243414619971f78899a272e26.png
[b95ccdc9645001d523e9d90db8e66abb.gif]: /images/20221022/e11aaeba89c842f5910feab1945ebf8a.png