Html5之高級-9 HTML5 Two.js(概述、入門)

1、Two.js 概述

Two.js 簡介

    - Two.js 是一個面向現代 Web 瀏覽器提供繪製二維圖形的 API ，它容許使用不一樣的上下文，而使用相同的 API 進行繪製

    - Two.js 所支持的上下文:

        - SVG 

        - Canvas

        - WebGL

    - 官方地址: http://jonobr1.github.io/two.js/

Two.js 特色

    - 專一於矢量圖:

        - Two.js 是深度實現具備動畫效果的矢量圖

        - Two.js 致力於更簡潔地建立矢量圖及動畫效果

        - Two.js 不支持文本或圖片

    - 場景:

        - Two.js 的核心是依賴於場景

        - 當建立或繪製一個對象 (Two,Polygon 或 Two.Group)時，是同時存儲並記憶

    - 循環動畫:

        - Two.js 具備一個內置的循環動畫

        - Two.js 的動畫效果能夠很簡單的實現，也能夠與其餘動畫庫配置使用

    - SVG 解釋器:

        - Two.js 具備 SVG 解釋器

        - Two.js 容許開發者或設計者在商業應用中建立 SVG，例如使用 Adobe Illustrator 建立的 SVG 元素歸入 Two.js 的場景中

2、Two.js 入門

Two.js 框架的使用

    - 在 HTML 頁面引入 Two.js 文件:

      <script src="two.js"></script>

    - 在 HTML 頁面定義用於顯示矢量圖的容器:

      <div id="draw-shapes"></div>

    - javascript 代碼獲取元素:

      document.getElementById("draw-shapes");

    - 使用 Two.js 提供的 API 進行繪製

      new Two(params).appendTo(elem);

繪製矩形元素

    - Two.js 框架使用makeRectangle(x,y,width,height)方法繪製矩形

      makeRectangle(x,y,width,height)

        - x:指定繪製的矩形左上角的座標值x

        - y:指定繪製的矩形左上角的座標值y

        - width:指定繪製的矩形的寬度

        - height:指定繪製矩形的高度

    - Two.js 框架使用makeCircle(x,y,radius)方法繪製矩形:

      makeCircle(x,y,radius)

        - x: 指定繪製圓形的圓心的座標值x

        - y: 指定繪製圓形的圓心的座標值y

        - radius: 指定繪製的圓形的半徑

元素分組

    - 元素分組:

        - 經過 Two.js 框架容許將繪製在頁面的多個圖形分爲一組或多組

        - 經過 Two.js 提供的 API 方法容許針對組進行操做或實現動畫

    - 建立分組:

        - 經過 Two.js 框架提供的構造器 Two.Group() 實現

        - 經過 Two.js 提供提供的相關 API 方法或屬性進行操做

    - 將已繪製的圖形分爲一組或多組:

        - 經過建立的two對象調用makeGroup()方法

        - makeGroup() 方法容許傳遞多個繪製圖形對象

        - 經過 Two.js 框架提供的相關 API 方法或屬性進行操做

添加動畫

    - two.play()方法:

        - 該方法向 requestAnimationFrame loop 添加一個實例，使該實例實現動畫效果

    - two.pause()方法:

        - 該方法從 requestAnimationFrame loop 刪除一個示例，使該示例的動畫效果中止

    - two.update()方法:

        - 該方法用於更新在HTML頁面中繪製的圖形的尺寸，增長動畫效果

總結：本章內容主要介紹了下 HTML5 Two.js(概述、入門)