A pie chart is a common visualization used to show the proportions of various components in a sample or population. Ring charts are similar to pie charts, except that there is a “big hole” in the middle. They might look something like this

Then how to use canvas to realize a pie chart or ring chart? Let’s look at the code first

    ctx.fillStyle = '#6cf';
    ctx.save();
    ctx.beginPath();
    ctx.arc(300, 300, 180, 0, Math.PI * 2);
    ctx.fill();
    ctx.restore();
Copy the code

With this line of code above, we’ve drawn a pie chart that looks like this

    ctx.fillStyle = '#6cf';
    ctx.save();
    ctx.beginPath();
    ctx.arc(300, 300, 180, 0, Math.PI * 2);
    ctx.fill();
    ctx.restore();
Copy the code

And with this line of code, we’ve implemented a ring graph that looks like this

The code above looked simple enough, and we quickly drew two diagrams, but with a flash of wisdom and a furrowed brow, the chubby Tiger realized it wasn’t that simple!

For the pie chart we draw a circle, and the color will naturally fill in the circle, there’s nothing to talk about, but for the circle chart we draw two circles, why only fill in the space between the two circles? Why not fill it out

What about the inner circle?

If you are careful, you have already noticed that we passed an extra field into the Canvas API when drawing the second circle of the ring graph. This is the problem. Let’s take a look at it below.

First let’s look at the API called above

void ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise); X ---- X-axis coordinates of the center of the arc y ---- Y-axis coordinates of the center of the arc radius ---- radius of the arc startAngle ---- The starting point of the arc, the X-axis direction begins to calculate, EndAngle ---- the end of an arc in radians, anticlockwise ---- Optional Boolean, if true, draws the arc counterclockwise, if not, draws it clockwise.Copy the code

And then we’re going to catch up on a wave of math.

  • vector
    • Vectors are quantities with magnitude and direction, which can be visualized as line segments with arrows
    • A unit vector is a vector of length one unit
    • Vector addition.

  • The tangent. A line that just touches a point on a curve. To be exact, when the tangent line passes through a point on the curve, the direction of the tangent line is the same as that point on the curve

Let’s focus on the sixth parameter of the above API—-arc. From the description above, we can see that if set to true, it is drawn counterclockwise and vice versa.

In view of the above this feature, the browser provides a rule, from a certain surface graphics as a point to do a line, the direction toward the surface graphics, must have a surface with a intersection point (may intersect with multiple surface, then the steps behind every intersection point), do the intersection point of the tangent as a unit vector, direction and surface graphic drawing in the same direction.

Assume that clockwise is set to positive (and so is anticlockwise to positive)

If the sum of the unit vectors of all the intersecting points of the line is not equal to 0, the point is considered to be in the colouring range of the surface, and if the size (modulus) of the vector is equal to 0, the point is considered not in the colouring range of the surface. The general process can be seen at 🌰 below

After following the previous steps in the above diagram, we find that point A is in the color range, point B is not in the color range, and point C is in the color range, so that means that the area where point A and point C are in the color range, but point B is not, and the drawing looks like this.

End, scatter flowers!