Winwheel.js example: One Image Per Segment

Here is an example of a wheel created on HTML canvas by the Winwheel.js JavaScript library using one image per segment, also includes code drawn text. Using one image per segment gives you a bit more flexibility over using a single image for the entire wheel as you could create wheels made up of all different combinations of segments. Though it is more work to create all the segment images.


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


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


See Winwheel Tutorial #17: Creating a Wheel with one Image per Segement for details about using this feature.




Power
High
Med
Low

Spin

  Play Again
     (reset)

Sorry, your browser doesn't support canvas. Please try another.

 		Each segment has its
own image like this...


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>One Image per segment 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'       : 8,                // Specify number of segments.
				'outerRadius'       : 200,              // Set outer radius so wheel fits inside the background.
				'drawText'          : true,             // Code drawn text can be used with segment images.
				'textFontSize'      : 16,				// Set text options as desired.
				'textOrientation'   : 'curved',
				'textAlignment'     : 'inner',
				'textMargin'        : 90,
				'textFontFamily'    : 'monospace',
				'textStrokeStyle'   : 'black',
				'textLineWidth'     : 3,
				'textFillStyle'     : 'white',
				'drawMode'          : 'segmentImage',    // Must be segmentImage to draw wheel using one image per segemnt.
				'segments'          :                    // Define segments including image and text.
				[
				   {'image' : 'jane.png',  'text' : 'Jane'},
				   {'image' : 'tom.png',   'text' : 'Tom'},
				   {'image' : 'mary.png',  'text' : 'Mary'},
				   {'image' : 'alex.png',  'text' : 'Alex'},
				   {'image' : 'sarah.png', 'text' : 'Sarah'},
				   {'image' : 'bruce.png', 'text' : 'Bruce'},
				   {'image' : 'rose.png',  'text' : 'Rose'},
				   {'image' : 'steve.png', 'text' : 'Steve'}
				],
				'animation' :           // Specify the animation to use.
				{
					'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(indicatedSegment.text + ' says Hi');
	        }
        </script>
    </body>
</html>

Previous:
< Basic image wheel 		Next:
Hollow Wheel >