前端动效展示

这是我参与更文挑战的第25天，活动详情查看： 更文挑战

前端动效我们一般会用SVG、Canvas、CSS3去实现，今天我想对这三者进行一个比较和总结。

SVG

一、定义
可伸缩矢量图形 (Scalable Vector Graphics)

二、预定义的形状元素

矩形 <rect>
圆形 <circle>
椭圆 <ellipse>
线 <line>
折线 <polyline>
多边形 <polygon>
路径 <path>

path: 
M = moveto
L = lineto
H = horizontal line-to
V = vertical lineto
C = curveto （曲线）
S = smooth curveto （平滑曲线）
Q = quadratic Belzier curve（二次贝赛尔曲线）
T = smooth quadratic Belzier curveto（平滑二次贝塞尔曲线）
A = elliptical Arc
Z = closepath
复制代码

Canvas

一、定义
图形的绘制，即画布
二、属性方法

矩形 rect()
圆形 arc()
线  lineCap()
图像绘制 drawImage()

路径
fill()                       填充当前绘图（路径）
stroke()                     绘制已定义的路径
beginPath()                  起始一条路径，或重置当前路径
moveTo()                     把路径移动到画布中的指定点，不创建线条
lineTo()                     添加一个新点，创建从该点到最后指定点的线条
closePath()                  创建从当前点回到起始点的路径
clip()                       从原始画布剪切任意形状和尺寸的区域
quadraticCurveTo()           创建二次贝塞尔曲线
bezierCurveTo()              创建三次方贝塞尔曲线
arc()                        创建弧/曲线（用于创建圆形或部分圆）
arcTo()                      创建两切线之间的弧/曲线
isPointInPath()              如果指定的点位于当前路径中，返回布尔值
复制代码

SVG和Canvas区别

1、Canvas和SVG的主要区别：
使用Canvas绘制图形是通过调用其API，而SVG则是通过构建一棵XML元素树来实现的。

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

3、SVG
不依赖分辨率
支持事件处理器
配合css实现动画效果
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用

4、性能
一般情况下，随着屏幕大小的增大，画布将开始降级，因为需要绘制更多的像素。随着屏幕上的对象数目增多，SVG将开始降级，因为我们正不断将这些对象添加到DOM中。这些度量不一定准确，以下方面的不同一定会引起变化：实现和平台、是否使用完全硬件加速的图形，以及js引擎的速度。

CSS3

一些效果总结

border-radius：左上  右上  右下  左下
box-shadow：左 下 右 上
text-shadow：x, y, 模糊度，颜色
transition: (整个运动过程)持续时间   运动属性    运动形式   延迟时间

linear-gradient(方向,各种颜色);        线性渐变
radial-gradient(方向,形状,各种颜色);   径向渐变
transform: skew();                    倾斜（扭曲）
transform: rotate();                  旋转
transform: translate();               平移
transform: scale();                   缩放
animation:                            名字 时间 运动形式 运动次数
filter: none                          默认值，没有效果。
blur                                  给图像设置高斯模糊
brightness                            给图片应用一种线性乘法，使其看起来更亮或更暗。
contrast                              调整图像的对比度。
drop-shadow                           给图像设置一个阴影效果
grayscale                             将图像转换为灰度图像
hue-rotate                            给图像应用色相旋转
invert                                反转输入图像
opacity                               转化图像的透明程度
saturate                              转换图像饱和度
sepia                                 将图像转换为深褐色
url                                   URL函数接受一个XML文件

3D转换：
transform: perspective(800px) rotateX();
transform: perspective(800px) rotateY();
transform: perspective(800px) rotateZ();

复制代码