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>
    var 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.


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 Segemnt class reference.



< #2 Constructor Parameters #4: Altering Segment Properties >