用wxDraw.js製作酷炫的小程式canvas動畫『wxDraw 小程式界的zrender』

bobiscool發表於2017-10-31

JSCanvas動畫

wxDraw

輕量的小程式canvas動畫庫

github

文件

是什麼

canvas 是HTML5的一個重要元素，它能夠高效的繪製圖形，但是過於底層，且粗糙的Api，導致開發者很難使用它來做較為複雜的圖形，而且它的即時繪製無記憶特性，使得它內部的圖形並不支援動畫更不支援一切互動事件。

這樣的問題出現在所有支援canvas的客戶端上同樣出現在 微信小程式中的canvas中，由於小程式由jscore支援，並沒有window物件，並且canvas的Api與標準的canvas的Api有所出入，所以市面上絕大部分canvas庫與它無緣。

而wxDraw也就應運而生，專門用於處理小程式上canvas的圖形建立、圖形動畫以及互動問題的。

特性

簡單不需要你會canvas,會用jQuery就會使用wxDraw。
靈活所有圖形，隨時隨地都可以進行屬性修改、圖形新增以及圖形銷燬。
事件支援 小程式支援的事件只要是合理的都支援。
緩動動畫支援 wxDraw支援鏈式呼叫動畫『就像jQuery的animate一樣』，並且支援幾乎所有的緩動函式
圖形建立

支援圖形

這些圖形都可以在演示檔案裡看到點這裡

rect

 var rect = new Shape('rect', {x: 60, y: 60, w: 40, h: 40, fillStyle: "#2FB8AC", rotate: Math.PI/2 },'mix', true);複製程式碼

circle

 let circle = new Shape('circle', { x: 100, y: 100, r: 40, sA: Math.PI/4, 
                             fillStyle: "#C0D860",
                            strokeStyle: "#CC333F", rotate: 20, lineWidth: 0, needGra: 'line', 
                              gra: [[0, '#00A0B0'], [0.2, '#6A4A3C'], [0.4, '#CC333F'], [0.6, '#EB6841'], [1, '#EDC951']]}, 
                           'fill', true)複製程式碼

polygon

let polygon = new Shape('polygon', { x: 200, y: 200, r: 40, sides: 9, //9邊形
                          fillStyle: "#FC354C", rotate: Math.PI / 4 }, 'mix', true)複製程式碼

ellipse

    let ellipse = new Shape('ellipse', { x: 200, y: 200, a: 40, b: 100, 
                             fillStyle: "#00A0B0", rotate: Math.PI / 7 }, 'mix', true)複製程式碼

cshape 「自定義圖形」

  let cshape = new Shape('cshape', {
      rotate: Math.PI / 2,
      points: [[70, 85], [40, 20], [24, 46], [2, 4], [14, 6], [4, 46]],
      lineWidth: 5,
      fillStyle: "#00A0B0",
      rotate: Math.PI / 7,
      needGra: 'circle',
      smooth:false,
      gra: [[0, '#00A0B0'], [0.2, '#6A4A3C'], [0.4, '#CC333F'], [0.6, '#EB6841'], [1, '#EDC951']]
    }, 'fill', true)複製程式碼

line


let line = new Shape('line', { points:[[240,373],[11,32],[28,423],[12,105],[203,41],[128,0.06]], 
               strokeStyle: "#2FB8AC",lineWidth:1, rotate: 0, needShadow: true,smooth:false },  
               'fill', true)複製程式碼

text

  let text = new Shape('text', { x: 200, y: 200, text: "我是測試文字", 
                      fillStyle: "#E6781E", rotate: Math.PI / 3}
                      'fill', true)複製程式碼