Winwheel.js tutorial: #2 Constructor Parameters
This tutorial demonstrates passing parameters to the Winwheel constructor to alter global options of the wheel. The parameters must be passed in a JSON format.
In this example we will specify the id of the canvas to use, the number of segments, the default colour (fillStyle) of the segments, and also change the line width to 3.
Example Code
<canvas id='myCanvas' width='880' height='300'>
Canvas not supported, use another browser.
</canvas>
<script>
let theWheel = new Winwheel({
'canvasId' : 'myCanvas',
'numSegments' : 12,
'fillStyle' : '#e7706f',
'lineWidth' : 3
});
</script>
Output on the Canvas
Additional Notes
If you give the canvas on the page the id 'canvas' then you don't need to specify the canvasId, you only need to do this if the canvas is called something else (as in this example where it is called myCanvas).
It is a good idea to tell the wheel object how many segments you want when constructing it, otherwise you get the default number. It is possible to add and remove segments after the object has been created, but that involves more code.
As you can see the colour (fillStyle) of the wheel segments was set globally; Most segment related parameters can be set globally and/or individually for each segment.
To see details of all the available parameters you can pass to the constructor refer to the Winwheel class reference.
|
Previous: < #1 Getting Started |
Next: #3: Segment Colour and Text > |