wxDraw

Lightweight small program Canvas animation library

github

The document

What is the

Canvas is an important element of HTML5. It can draw graphics efficiently, but its low-level and rough Api makes it difficult for developers to use it to make more complex graphics. Moreover, its instant drawing feature has no memory, so its internal graphics do not support animation, let alone all interactive events.

Such a problem occurs on all canvas clients and also in the canvas of wechat applet. Since the applet is supported by JScore and does not have window objects, and the Api of Canvas is different from that of standard Canvas. Therefore, most canvas libraries in the market are not connected with it.

WxDraw comes into being, specially used to deal with small programs on canvas graphics creation, graphics animation and interaction problems.

features

  • Simple you don’t need to know canvas, you can use jQuery to use wxDraw.
  • Flexible all graphics, you can modify properties, add graphics and destroy graphics anytime and anywhere.
  • Event support Events supported by applets are supported as long as they are reasonable.
  • WxDraw supports chained invocation animation “just like jQuery animate”, and supports graphic creation of almost any animated function

Support for graphics

All of these graphics can be seen in the demo file here

rect

 var rect = new Shape('rect', {x: 60.y: 60.w: 40.h: 40.fillStyle: "#2FB8AC".rotate: Math.PI/2 },'mix'.true);
Copy the code

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)
Copy the code

polygon

let polygon = new Shape('polygon', { x: 200.y: 200.r: 40.sides: 9./ / 9 side
                          fillStyle: "#FC354C".rotate: Math.PI / 4 }, 'mix'.true)
Copy the code

ellipse

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

Cshape “Custom graphics”

  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)
Copy the code

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)
Copy the code

text

  let text = new Shape('text', { x: 200.y: 200.text: "I am the test word.".fillStyle: "#E6781E".rotate: Math.PI / 3}
                      'fill'.true)
Copy the code

Animation demo created by wxDraw

All of these animations can be seen in the demo file by clicking here

Google

snake

Logo interpretation

The rect dance

pac-man

WxDraw event

All of these events can be seen in the demo file here

support

  • tap
  • touchStart
  • touchEnd
  • touchMove
  • longPress
  • Drag “Custom event”

Events demonstrate

Next to UI little sister personally demonstration 😜

The first perspective

Is not particularly simple, particularly convenient!! Come on, old men!starTake a walk!!

If you think this library is good and helpful, buy the author a chicken leg. “I need this for my recent workout.”

Please pay attention to the detailed documentation

github

The document