用wxDraw.js製作酷炫的小程式canvas動畫『wxDraw 小程式界的zrender』
wxDraw輕量的小程式canvas動畫庫
是什麼
canvas 是HTML5的一個重要元素，它能夠高效的繪製圖形，但是過於底層，且粗糙的Api，導致開發者很難使用它來做較為複雜的圖形， 而且它的即時繪製無記憶特性，使得它內部的圖形並不支援動畫更不支援一切互動事件。
這樣的問題出現在所有支援canvas的客戶端上同樣出現在 微信小程式中的canvas中， 由於小程式由jscore支援，並沒有window物件，並且canvas的Api與標準的canvas的Api有所出入，所以市面上絕大部分canvas庫與它無緣。
而wxDraw也就應運而生，專門用於處理小程式上canvas的圖形建立、圖形動畫以及互動問題的。
特性
簡單 不需要你會canvas,會用jQuery就會使用wxDraw。
靈活 所有圖形，隨時隨地都可以進行屬性修改、圖形新增以及圖形銷燬。
事件支援 小程式支援的事件只要是合理的都支援。
緩動動畫支援 wxDraw支援鏈式呼叫動畫『就像jQuery的animate一樣』，並且支援幾乎所有的緩動函式圖形建立
支援圖形
這些圖形都可以在演示檔案裡看到 點這裡
rect
| 1 | var rect = new Shape('rect', {x: 60, y: 60, w: 40, h: 40, fillStyle: "#2FB8AC", rotate: Math.PI/2 },'mix', true); |
circle
| 12345 | 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
| 1 | let polygon = new Shape('polygon', { x: 200, y: 200, r: 40, sides: 9, //9邊形 fillStyle: "#FC354C", rotate: Math.PI / 4 }, 'mix', true) |
ellipse
| 1 | let ellipse = new Shape('ellipse', { x: 200, y: 200, a: 40, b: 100, fillStyle: "#00A0B0", rotate: Math.PI / 7 }, 'mix', true) |
cshape 「自定義圖形」
| 12345678910 | 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",
|