Now we’re ready to draw the arc. Let’s write a function so you can easily change the data. That way, you can reuse the code any time you need to display a slice.
From html5 to C2 the function ctx.arc(x, y ,radius, startAngle, endAngle, clockwise) is written as shown below.
We move the canvas “pen” to the starting point, which is the center of the circle, draw the arc, and then close the path, so we get a pie wedge shape.
The Function. Param(0) corresponds to startAngle of segment of slice, while the Function. Param(1) corresponds to endAngle of segment of slice.
The starting angle starts from the east side of the x axis, and goes around clockwise when we use positive angle measurements, so that’s why we draw the arcs in a clockwise direction.
Finally, we need to fill the arc, the Function. Param(2) corresponds to color of segment and fill the path we’ve just drawn.
Now, call this function in event sheet as :
The output will be as shown in fig. 3
Now we will add labels. Labels contains strings that will be used to label the segments of slice.
Create a textbox object and paste it on canvas and give another Function.Param() as the value of string label as shown.
If you call it now with additional parameter like this,
You will get the output like as shown in fig. 4.
Now make all the slices by calling the function for all segments like this.
The final output will be as shown.
Hope you must have enjoyed this tutorial and learnt something useful. If you have any questions, you are welcome.
I have created some advance dynamic wheels that you can view here.
Example # 1 :
Wheel 2 Decide
Example # 2 :
Dynamic Wheel at Scirra Arcade