H5小内容（四）

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 - 事件处理函数

巴特西

H5小内容（四）

最新文章

热门文章