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

wxDraw

輕量的小程序canvas動畫庫git

github

文檔

是什麼

canvas 是HTML5的一個重要元素,它可以高效的繪製圖形,可是過於底層,且粗糙的Api,致使開發者很難使用它來作較爲複雜的圖形, 並且它的即時繪製無記憶特性,使得它內部的圖形並不支持動畫更不支持一切交互事件。github

這樣的問題出如今全部支持canvas的客戶端上一樣出如今 微信小程序中的canvas中, 因爲小程序由jscore支持,並無window對象,而且canvas的Api與標準的canvas的Api有所出入,因此市面上絕大部分canvas庫與它無緣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);複製代碼

rect
rect

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)複製代碼

wxDraw創做的動畫演示

這些動畫均可以在演示文件裏看到 點這裏微信

Google

貪吃蛇

logo演繹

rect舞蹈

吃豆人

wxDraw事件

這些事件均可以在演示文件裏看到 點這裏ide

支持函數

  • tap
  • touchStart
  • touchEnd
  • touchMove
  • longPress
  • drag「自定義的事件」

事件演示

旁邊UI小妹妹親自示範 😜

第一視角

是否是特別簡單,特別方便!!!
來,老鐵們!
star 走一波!!!測試

若是你以爲這個庫還不錯 對你有幫助 那給做者買一個雞腿吧「最近健身 須要補這個」

詳細文檔還請關注

github

文檔

相關文章
相關標籤/搜索