Winwheel.js tutorial: #3 Segment Colour and Text
This tutorial demonstrates setting the segment colour and text by passing the segment information in with the other parameters to the Winwheel constructor. As you can see this is very easy to do using the JSON format.
Example Code
<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'} ] }); </script>
Output on the Canvas
Multiline text
It's possible to have multiline text, from Winwheel.js version 2.5, by using the newline character \n in the text of the segments.
Additional Notes
Even if you pass the segment parameters in, you still need to specify the number of segments using the numSegments parameter. If you don't then not all of the segments may appear or you may end up with blank default ones.
To see details of all the available segment parameters refer to the Segment class reference.
Previous: < #2 Constructor Parameters |
Next: #4: Altering Segment Properties > |