canvas-shapes

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

only support >=ie9

@github

download

download from github

demo - shapes random movement

all starall bubbleall heartall lightall balloonrandomstopspeed upadd one more

demo - shapes render text

render

test

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

how to use

reference it in html

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

init

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

in js

//main
$(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']

  //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(){
    //...
  }

  //visit src/canvas-shapes.js for example

})