Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

About

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

Resources

License

You can’t perform that action at this time.