Tutorials‎ > ‎

Simple Script to Animate in Canvas HTML5

posted Dec 23, 2011, 2:42 AM by Sofia _   [ updated Aug 15, 2016, 11:36 PM by Surya Wang ]

I am creating a simple jQuery Plugin to animate image in canvas html5.

To use the plugin just simply add this line
$('#myDiv').animateCanvas();

To change the value etc you can write like this
$('#myDiv').animateCanvas({
 speed : 5,
 imageSize : 300,
 imageSource: '1.png',
 effect: 'slideIn'
});


There is 4 value you can change
  1. speed : the speed of the animation, more smaller more fast. The default is 10
  2. imageSize : the size of the image. The default is 100.
  3. imageSource : the source of image. the default is 'default.png'
  4. effect: the effect. the default is 'rotate'
The effect
  1. rotate
  2. fadeIn
  3. fadeOut
  4. bounce
  5. zoomOut
  6. zoomIn
  7. slideIn
  8. slideOut
ċ
animatecanvas.zip
(206k)
Sofia _,
Dec 23, 2011, 2:51 AM