Winwheel.js example: Image-drawn wheel

Here is an example of a Winwheel.js wheel created using a graphically rich image, for example a png. You could include text in the image, or as seen in this example code-drawn text can be rendered on top of the image.


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


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




Power
High
Med
Low

Spin

  Play Again
     (reset)

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

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>Image 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'       : 4,        	// Specify number of segments.
				'outerRadius'       : 150,      	// Set outer radius so wheel fits inside the background.
				'drawMode'          : 'image',  	// drawMode must be set to image.
				'drawText'          : true,     	// Need to set this true if want code-drawn text on image wheels.
				'textFontSize'      : 12,
				'textOrientation'   : 'curved',		// Note use of curved text.
				'textDirection'     : 'reversed',	// Set other text options as desired.
				'textAlignment'     : 'outer',
				'textMargin'        : 5,
				'textFontFamily'    : 'monospace',
				'textStrokeStyle'   : 'black',
				'textLineWidth'     : 2,
				'textFillStyle'     : 'white',
				'segments'     :                // Define segments.
				[
				   {'text' : 'T-55 Vampire'},
				   {'text' : 'P-40 Kittyhawk'},
				   {'text' : 'North American Harvard'},
				   {'text' : 'L-39C Albatross'}
				],
				'animation' :                   // Specify the animation to use.
				{
					'type'     : 'spinToStop',
					'duration' : 5,     		// Duration in seconds.
					'spins'    : 8,     		// Number of complete spins.
					'callbackFinished' : alertPrize
				}
			});

			// Create new image object in memory.
			let loadedImg = new Image();

			// Create callback to execute once the image has finished loading.
			loadedImg.onload = function()
			{
				theWheel.wheelImage = loadedImg;    // Make wheelImage equal the loaded image object.
				theWheel.draw();                    // Also call draw function to render the wheel.
			}

			// Set the image source, once complete this will trigger the onLoad callback (above).
			loadedImg.src = "planes.png";

			// Called when the animation has finished.
			function alertPrize(indicatedSegment)
	        {
	            // Do basic alert of the segment text.
	            alert("The plane is " + indicatedSegment.text);
	        }
        </script>
    </body>
</html>

Previous:
< Wheel of fortune 		Next:
One image per segment >