SVG
基本内容 SVG并不属于HTML5专有内容 HTML5提供有关SVG原生的内容 在HTML5出现之前,就有SVG内容 SVG,简单来说就是矢量图 SVG文件的扩展名为".svg" SVG使用的是XML语法 概念 SVG是一种使用XML技术描述二维图形的语言 SVG的特点 SVG绘制图形可以被搜索引擎抓取 SVG在图片质量不下降的情况下,被放大 SVG与Canvas的区别 SVG 不依赖分辨率 支持事件绑定 大型渲染区域的程序(例如百度地图) 不能用来实现网页游戏 Canvas 依赖分辨率 不支持事件绑定 最合适网页游戏 保存为".jpg"格式的图片 用途 网页中一些小的图标 网页中动态特效(动画效果) HTML5中使用SVG 使用<svg></svg>元素 作用 - 类似于<canvas>元素 默认大小为300px 150px 使用CSS样式 使用SVG绘制图形,必须定义<svg>元素中 绘制图形 矩形元素 <rect x="" y="" width="" height="" /> 圆形元素 <circle cx="" cy="" r="" /> 椭圆元素 <ellipse cx="" cy="" rx="" ry=""> 直线元素 <line x1="" y1="" x2="" y2="" /> 折线元素 <polyline points=""> 多边形元素 <polygon points="" /> 特效元素 渐变 - 渐变元素定义在<defs>元素内 线型渐变 - <linearGradient> 该元素是起始元素 <linearGradient x1="%" y1="%" x2="%" y2="%"> <stop offset="%" stop-color="color" /> </linearGradient> 扇形(射线)渐变 - <radialGradient> 滤镜 - 高斯模糊 滤镜使用<filter>元素 <feGaussianBlur>元素 - 高斯模糊 in="SourceGraphic" stdDeviation - 设置模糊程度 注意 - 定义在<defs>元素中 TWO.js 基本内容 JS库介绍 three.js - 专门用于绘制三维图形 two.js - 专门用于绘制二维图形 two.js支持的格式 SVG - 默认 Canvas WebGL - 专门用于绘制图像 如何使用two.js 在HTML页面中引入two.js文件 在HTML页面中定义容器(<div>) 在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 - 事件处理函数