前端动效我们一般会用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();
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!