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 - 事件處理函數