winwheel-esm
Create spinning prize wheels on HTML canvas with winwheel-esm a fork of Winwheel.js
Description
winwheel-esm 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 gsap's TweenMax, which contain easing functions, and many other powerful animation features.
winwheel-esm Features Include:
- Easy to use, highly configurable JavaScript classes.
- Draw wheels using code generated segments or graphically rich images.
- Responsive features so wheels display correctly on different sized devices.
- Numerous text orientation, direction, size and colour options.
- Random or Pre-calculated prize stopping location.
- Play sounds while the wheel is spinning including a "tick" sound.
- Ability to get the segment the user clicked upon.
- Fully commented source code. Plenty of tutorials and other documentation.
- winwheel-esm is free to use with an open source license.
Example
import { Winwheel } from '@yavko/winwheel-esm';
const wheel = 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
}
});
More examples
See the /examples folder for examples of some of the types of things you can create with winwheel-esm, to see these examples in action please visit the examples section on the original winwheel website http://dougtesting.net/winwheel/examples
Tutorials and other documentation
Please visit http://dougtesting.net/winwheel/docs to see a complete set of tutorials on how to use winwheel-esm as well as other documentation such as class references.
Maintainer
Yavor Kolev https://github.com/yavko
Please note
This wasn't created by me this is just a fork of Winwheel.js that supports ecmascript modules