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

Canvas not supported, use another browser.


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 >