Winwheel.js Examples
See the examples below for some of the types of wheels, and other things, that you can create with Winwheel.js
|
Basic code wheel
In this example I show how to create a basic code-drawn wheel by passing parameters in to the Winwheel.js constructor.
The wheel has a spin to stop animation alerts the prize won to the user.
|
|
|
Wheel of Fortune style wheel
In this example I show how to create a Wheel of Fortune style wheel using the code-drawn mode of Winwheel.js
Includes pins with a 'ticking' sound when they pass under the pointer.
|
|
|
Basic Image wheel
In this example I show how to create a wheel out of a single graphically rich image.
Image wheels can have code-drawn text in the segments, which allows for some flexibility, this example show that.
|
|
|
One image per segment
In this example I show how to create a wheel using individual images for each segment.
This gives more flexibility over creating the wheel out of a single image, because you
could mix and match the segments.
|
|
|
Hollow wheel
In this example I show how to create a hollow (doughnut) wheel with Winwheel.js
One of the things a hollow wheel can be useful for is to have a stationary wheel center
by showing the background through the hole in the wheel.
|
|
|
2 Part wheel
In this example I show how to create a 2 part wheel, with 2 rings of segments.
This is achieved by creating a second Winwheel object and positioning it inside the first wheel,
then linking their rotation angle together in the animation.
|
|
The examples are only a small sample of what is possible with Winwheel.js; I highly recommend that you
take a look though the tutorials
to see all of the properties and features of Winwheel.js. More examples may be included in the Winwheel.js repository on Github.