Winwheel.js tutorial: #18 Displaying Pins
This tutorial demonstrates displaying Pins around the wheel. These are meant to represent the Pins/Pegs which stick out from real life Prizewheels, and are simply an optional visual element avaialble to you from Winwheel.js version 2.5.
Pins are spaced evenly around the wheel, with a default of 36 so that a pin appears every 10 degrees around the 360 degrees which make up the wheel. You adjust the number of pins to control the spacing between the pins, for example doubling the number to 72 means a pin will appear evey 5 degrees around the wheel.
You can also contol the size of the pins with the outerRadius property and set the fillStyle, strokeStyle, and lineWidth properties to adjust the appearance of the pins.
Finally you can adjust the location of the pins by altering the margin. A margin of 0 means the pins will sit right on the outside of the wheel, whereas a margin of 10 will push the pins 10 pixels in towards the center of the wheel.
Example Code
<canvas id='canvas' width='880' height='300'>
Canvas not supported, use another browser.
</canvas>
<script>
let theWheel = new Winwheel({
'numSegments' : 4,
'segments' :
[
{'fillStyle' : '#eae56f', 'text' : 'Segment 1'},
{'fillStyle' : '#89f26e', 'text' : 'Segment 2'},
{'fillStyle' : '#7de6ef', 'text' : 'Segment 3'},
{'fillStyle' : '#e7706f', 'text' : 'Segment 4'}
],
'pins' : true // If you are happy with the default parameters you
}); // can just specify true to get the pins to display.
</script>
Output on the Canvas
Specifying Pin parameters
The following example shows how to specify the pin parameters. In this case I have halfed the number of pins, make them slighty bigger, moved them in a bit with some margin, and finally made them a different colour to the default.
<canvas id='canvas' width='880' height='300'>
Canvas not supported, use another browser.
</canvas>
<script>
let theWheel = new Winwheel({
'numSegments' : 4,
'segments' :
[
{'fillStyle' : '#eae56f', 'text' : 'Seg 1'},
{'fillStyle' : '#89f26e', 'text' : 'Seg 2'},
{'fillStyle' : '#7de6ef', 'text' : 'Seg 3'},
{'fillStyle' : '#e7706f', 'text' : 'Seg 4'}
],
'pins' : // Specify pin parameters.
{
'number' : 18,
'outerRadius' : 5,
'margin' : 10,
'fillStyle' : '#7734c3',
'strokeStyle' : '#ffffff'
}
});
</script>
To see details of all the available parameters you can pass to the constructor refer to the Pin class reference.
|
Previous: < #17 Creating a Wheel with one Image per segment |
Next: #19 Playing Sounds and Music > |