I recently had to implement a similar type of dynamic graphic in canvas for a project I’m working on, so I thought I’d turn it into a tutorial on how to make a dynamic wheel and insert labels.
In this example, we will make a wheel with 6 slices and insert labels to it. I shall be using draw html5 canvas on construct 2 using canvas plugin. (you can later modify it and take to any level and any number of slices)
Demo Here
STEP 1
Bring canvas on your layout and give it behavior rotation, set speed = 100.
STEP 2
Write following Global variables, RADIUS, cx,cy to define the parameters of wheel with cx, cy being the center of the arc.
The html5 function being translated is “ctx.arc(x,y,radius,startAngle,endAngle, clockwise);”
This will be outer circle of radius 5 px more with black stroke of width 20. The output will be as in fig. 1.
Next, we draw inner circle with following parameters.
The output will be as in fig. 2.