svg 背景
svg是scalable vector graphics的缩写，意为可缩放矢量图形。1998年，万维网联盟成立了一个工作组，研发一种通过xml来表现矢量图形的技术——svg！由于svg也是一种xml文件，所以svg也继承了xml的开放性、可移植性和交互性的优点。如今几乎所有主流的浏览器都支持svg，大家可以从 这里 得到更多的兼容信息，其中包括：
使用或者元素来显示基本的svg图形；
使用来显示svg图形；
将svg图形应用为css背景图；
直接在html文档中使用标签（需要html5支持）；
对使用css或者外部对象元素的html元素使用svg变换、滤镜等特效；
对svg对象使用类似photoshop的效果，包括模糊和色彩处理；
对svg图像使用动画；
使用svg格式的字体；
* svg
* 基本内容
* svg并不属于html5专有内容
* html5提供有关svg原生的内容
* 在html5出现之前,就有svg内容
* svg,简单来说就是矢量图
* svg文件的扩展名为.svg
* svg使用的是xml语法
* 概念
* svg是一种使用xml技术描述二维图形的语言
* svg的特点
* svg绘制图形可以被搜索引擎抓取
* svg在图片质量不下降的情况下,被放大
* svg与canvas的区别
* svg
* 不依赖分辨率
* 支持事件绑定
* 大型渲染区域的程序(例如百度地图)
* 不能用来实现网页游戏
* canvas
* 依赖分辨率
* 不支持事件绑定
* 最合适网页游戏
* 保存为.jpg格式的图片
* 用途
* 网页中一些小的图标
* 网页中动态特效(动画效果)
* html5中使用svg
* 使用元素
* 作用 - 类似于元素
* 默认大小为300px*150px
* 使用css样式
* 使用svg绘制图形,必须定义元素中
* 绘制图形
* 矩形元素
复制代码
代码如下:
svg绘制矩形
* 圆形元素
* 椭圆元素
* 直线元素
* 折线元素
* 多边形元素
* 特效元素
* 渐变 - 渐变元素定义在元素内
* 线型渐变 -
* 该元素是起始元素
* 扇形(射线)渐变 -
* 滤镜 - 高斯模糊
* 滤镜使用元素
* 元素 - 高斯模糊
* in=sourcegraphic
* stddeviation - 设置模糊程度
复制代码
代码如下:
* 注意 - 定义在元素中
* two.js
* 基本内容
* js库介绍
* three.js - 专门用于绘制三维图形
* two.js - 专门用于绘制二维图形
* two.js支持的格式
* svg - 默认
* canvas
* webgl - 专门用于绘制图像
* 如何使用two.js
* 在html页面中引入two.js文件
* 在html页面中定义容器(
)
* 在javascript代码中
* 获取html页面中的容器
* 创建two对象,将该对象添加到容器中
new two(params).appendto(element);
* 使用two.js提供的api方法进行绘制
* 利用two.js提供的方法,设置图形
* 利用update()方法进行绘制
* 创建two对象
* 构造器 - new two(params)
* params参数 - 设置当前对象的信息
* type - 设置当前使用的格式(two.types.svg)
* svg - 默认值
* canvas
* webgl
* width和height - 设置宽度和高度
* fullscreen - 设置是否全屏
* boolean值,true表示全屏
* 图形方法
* makeline() - 绘制线条
* makerectangle() - 绘制矩形
* makecircle() - 绘制圆形
* makeellipse() - 绘制椭圆
* 动画方法
* update() - 更新动画
* play() - 添加动画(循环)
* pause() - 删除动画
* 设置绘制图形的样式
* 调用two对象的绘制方法绘制图形时,返回该图形对象
* 通过该图形对象,设置相关属性值
* 分组操作
* two.group
* 动画效果
* bind(event,callback)方法 - 事件绑定
* event - 绑定事件名称
* update - 对应update()方法的作用
* 所有的dom事件都可以绑定
* callback - 事件处理函数
* 扩展内容
* 前端开发工具
* aptana studio 3 - 代码提示
* webstrom - 国内前端开发人员神器
* 实际开发中
* 多用svg
* 不失真
* 可被搜索
* 页面优化 - 减少外部链接
*
*
* canvas - html绘制图形
* 实际运行中,是以图片方式出现(.png)
* 不能被搜索引擎抓取
* 放大后失真
* svg内容
* 内容量非常大
* 静态绘制图形
* 动态动画效果
* 专门提供事件
* 网上关于svg的资料很少(没有书籍)
* svg的规范(w3c英文)
* svg或canvas在html页面中定义
* 是只能定义一个元素,还是可以定义多个元素?
* 在一个html页面可以定义多个或元素
* svg还是canvas都是允许同时定义(绘制)多个图形
* 在实际开发中的使用
* svg在将来的工作开发,使用率并不高
* svg图片一般都是由ui设计师来完成
* svg即使是我们自己来设计(绘制)
* 目前网络上很多专门提供现成的svg图片的网站
* 使用js库------------------------------------------------------------------------------------>为了生活而改变，为了改变而创造.