dougTesting.net : Winwheel.js example: Hollow wheel

Winwheel.js example: Hollow/doughnut wheel

Here is an example of a basic hollow (doughnut) wheel drawn on HTML canvas by the Winwheel.js JavaScript library. The key property for this is innerRadius.

After choosing a power level and clicking 'Spin' the wheel animates for a few seconds, spinning to a stop with the prize won alerted to the user.

One thing to note in this example is that it shows how with a hollow wheel, you can put text or other visual elements on the background image. It will show though the middle of the wheel and stay stationary when the wheel spins, which is kinda cool.

This example is included in the Winwheel.js download: /examples/hollow_wheel/index.html

Power
High
Med
Low

Play Again
(reset)

The code

The key bit of code - the parameters to Winwheel.js - used to create this wheel is shown below. To view the full source code used to create this example (including the power selectors and spin button) see the code for this example on Github...

<html>
    <head>
        <title>Hollow Wheel</title>
        <script src='Winwheel.js'></script>
    </head>
    <body>
        <canvas id='canvas' width='880' height='300'>
            Canvas not supported, use another browser.
        </canvas>
        <script>
			let theWheel = new Winwheel({
				'numSegments'   : 16,   // Specify number of segments.
				'outerRadius'   : 212,  // Set radius to so wheel fits the background.
				'innerRadius'   : 120,  // Set inner radius to make wheel hollow.
				'textFontSize'  : 16,   // Set font size accordingly.
				'textMargin'    : 0,    // Take out default margin.
				'segments'      :       // Define segments including colour and text.
				[
				   {'fillStyle' : '#eae56f', 'text' : 'Prize 1'},
				   {'fillStyle' : '#89f26e', 'text' : 'Prize 2'},
				   {'fillStyle' : '#7de6ef', 'text' : 'Prize 3'},
				   {'fillStyle' : '#e7706f', 'text' : 'Prize 4'},
				   {'fillStyle' : '#eae56f', 'text' : 'Prize 5'},
				   {'fillStyle' : '#89f26e', 'text' : 'Prize 6'},
				   {'fillStyle' : '#7de6ef', 'text' : 'Prize 7'},
				   {'fillStyle' : '#e7706f', 'text' : 'Prize 8'},
				   {'fillStyle' : '#eae56f', 'text' : 'Prize 9'},
				   {'fillStyle' : '#89f26e', 'text' : 'Prize 10'},
				   {'fillStyle' : '#7de6ef', 'text' : 'Prize 11'},
				   {'fillStyle' : '#e7706f', 'text' : 'Prize 12'},
				   {'fillStyle' : '#eae56f', 'text' : 'Prize 13'},
				   {'fillStyle' : '#89f26e', 'text' : 'Prize 14'},
				   {'fillStyle' : '#7de6ef', 'text' : 'Prize 15'},
				   {'fillStyle' : '#e7706f', 'text' : 'Prize 16'}
				],
				'animation' :           // Define spin to stop animation.
				{
					'type'     : 'spinToStop',
					'duration' : 5,
					'spins'    : 8,
					'callbackFinished' : alertPrize
				}
			});

			// Called when the animation as finished.
			function alertPrize(indicatedSegment)
	        {
	            // Do basic alert of the segment text.
	            alert("You have won " + indicatedSegment.text);
	        }
        </script>
    </body>
</html>

Previous:
< One Image Per Segment

Next:
2 Part Wheel >