this jquery plugin will draw simple shape moving animation in canvas.
JavaScript
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
src
test
.gitignore
LICENSE
README.md
bower.json
gulpfile.js
package.json

README.md

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