How to Draw Slices Dynamically and Label it using Canvas plugin?

1

Index

Attached Files

The following files have been attached to this tutorial:

.capx

Stats

3,980 visits, 6,221 views

Tools

Translations

This tutorial hasn't been translated.

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 26 May, 2017. Last updated 19 Feb, 2019

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.

  • 0 Comments

Want to leave a comment? Login or Register an account!