用wxDraw.js制做酷炫的小程序canvas动画『wxDraw 小程序界的zrender』

时间 2019-11-29

标签 wxdraw.js wxdraw 制做程序 canvas 动画 zrender 栏目 JavaScript 繁體版

原文原文链接

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);复制代码

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)复制代码