canvas-shapes

this jquery plugin will draw simple shape moving animation in canvas.

only support >=ie9

demo & doc

http://html5beta.com/apps/canvas-shapes.html

get

bower install canvas-shapes

use

reference it in html

<script src="jquery.min.js"></script>
<script src="canvas-shapes.min.js">

init

<canvas id="ca"></canvas>

$(function() {
  var options = {
    shapeCount: 20 //howmany shapes to draw
    ,timer: 100 //render animation frame for every {timer} ms
    ,step: 3 //aniamtion step px
    ,minSize: 50 //shape size min
    ,maxSize: 150 //shape size max
  }
  var shapesInst = new Shapes('#ca', options)
 
  //what shape you want draw, inside there are 'star', 'bubble', 'heart'
  //default methodsPool = ['star']
  shapesInst.methodsPool= ['star', 'bubble', 'heart', 'light', 'balloon']
 
  //start animation
  shapesInst.start()
 
  //stop
  shapesInst.stop()
 
  //visit src/canvas-shapes.js for more instance method 
 
  //you can extend shape draw method by 
  Shapes.prototype.build_shape_your_shape_name = function(){
    //...
  }
  Shapes.prototype.draw_your_shape_name = function(){
    //...
  }
 
  //optional methods
  //visit http://html5beta.com/apps/canvas-shapes.html for use example
  shapesInst.buildPosArrayFromText(text, options)
  shapesInst.moveTo(targetArr, options)
 
  //visit src/canvas-shapes.js for example
  //visit test/test.js for more example
 
})

test

git clone https://github.com/zxdong262/canvas-shapes.git
cd angular-pagenav
npm install
bower install
gulp test

changelog

• 1.1.0 add inst.movetTo(targetPositionArray) function
• 1.0.3 add balloon shape
• 1.0.1 add light shape
• 1.0.0 fix push/pop function, count change relatively

LICENCE

MIT