一）基础篇

（一）概述

SVG，Scalable Vector Graphics，可缩放的矢量图形

1.图形和图像

• 图形：是由 被称为矢量的数学对象 所定义点、线、面等所描绘而成
• 图像：又称为栅格图、点阵图、位图或像素图，用像素描述图像中每一个点颜色和亮度等信息

2.svg特点

• svg使用xml绘制图形（canvas绘制图形）
• 可以使用文本编辑器创建和修改图形
• 因为是描述的图形，浏览器会根据描述来绘制图形，而不是使用像素填充空间，所以svg 适合不同大小的屏幕
• 因为是xml语言描述的图形，图形中的部分都是由标签组成，其中 每一个标签都可以使用javascript和css控制与交互
• svg提供了强大的滤镜功能，可以绘制更逼真、更复杂的图形效果

（一）概述

• Canvas 是 HTML5 的一个新标签，相当于一个画布，可以用来绘制丰富的图形，最终渲染在浏览器上
• Canvas 标签本身不具备绘制图形的能力，配合 JavaScript 提供的 CanvasAPI，才能绘制图形，文本和图像，以及实现动画和交互
• 支持 2d 绘图，也支持 3d 绘图（WebGL）

1.Canvas绘制的图形是位图

• 放缩会导致图像失真，所以需要注意放缩比例的控制
• 可以操作每一个点位的像素，进而实现高度自定义的图形绘制和动画效果
• 相当于 <img> 引入的图片，可以右键另存