Create spinning prize wheels on HTML canvas with Winwheel.js
Winwheel.js is a feature packed JavaScript library that allows you to easily create HTML5 canvas Winning / Prize Wheels, Pie graphs and other things using a highly configurable JavaScript class.
Wheels can be animated using GreenSock's Animation Platform (TweenMax.js) which contain easing functions and many other powerful animation features.
Winwheel.js Features Include:
- Easy to use, highly configurable JavaScript classes.
- Draw wheels using code generated segments or graphically rich images.
- Numerous text orientation, direction, size and colour options.
- Random or Pre-calculated prize stopping location.
- Ability to get the segment the user clicked upon.
- Fully commented source code. Plenty of tutorials and other documentation.
- Winwheel.js is free to use with an open source licence.
var myWheel = new Winwheel({
'numSegments' : 4,
'segments' :
[
{'fillStyle' : '#eae56f', 'text' : 'Prize One'},
{'fillStyle' : '#89f26e', 'text' : 'Prize Two'},
{'fillStyle' : '#7de6ef', 'text' : 'Prize Three'},
{'fillStyle' : '#e7706f', 'text' : 'Prize Four'}
],
'animation' :
{
'type' : 'spinToStop',
'duration' : 5,
'spins' : 8
}
});
See the /examples folder for examples of some of the types of things you can create with Winwheel.js
Please visit http://dougtesting.net/winwheel/docs to see a complete set of tutorials on how to use Winwheel.js as well as other documentation such as class references.
Douglas McKechie https://github.com/zarocknz
Keep informed about Winwheel.js by following https://twitter.com/dougtesting
More examples