Some misconceptions about the counterclockwise parameter in canvas arc ()

has not been very careful to study the arc method of the Canvasrenderingcontext2d object, the understanding of it is relatively vague, resulting in a number of mistakes, the special text to correct the previous misunderstanding.

The arc () method is defined as follows:

The arc () method adds an arc to the current sub-path of a canvas using a center point and radius.

Grammar:

Arc (x, y, radius, startangle, Endangle, counterclockwise)

The coordinate of the

Parameters	Description
x, y	center of the circle that describes the arc.
radius	the radius that describes the circle of the arc.
StartAngle, Endangle	Specifies an angle of the start and end points of the arc along the circle. This angle is measured in radians. The angle of the three o'clock direction along the positive half axis of the X-axis is 0.
counterclockwise	Optional. The rules should be plotted counterclockwise or clockwise. False = clockwise, true = counterclockwise.

The first step is to explicitly startangle This parameter, which is defined as "an angle of 0 along the three o'clock direction of the positive half of the X-axis", such as:

The first 5 parameters of this method specify a starting point and an end point for the circumference. Calling this method adds a line between the current point and the starting point of the current subpath. Next, it adds an arc between the start and end points of the subpath along the circumference (the direction starts from the starting point and arcs to the end point).

The last counterclockwise parameter specifies the direction in which the circle should always connect the starting and ending points. This method sets the current position to the end of the arc.

First look at the clockwise situation:

Ctx.beginpath (); Ctx.arc (100,75,50,0,math.pi/2,false); Ctx.stroke ();

Counterclockwise:

Ctx.beginpath (); Ctx.arc (100,75,50,0,math.pi/2,true); Ctx.stroke ();

In both cases, arcs are drawn from the starting point toward the end, but are separated by clockwise and counterclockwise, so there are two different kinds of graphs.

Finally, an example is given to illustrate this process:

Counterclockwise (true)

Clockwise (false)

Some misconceptions about the counterclockwise parameter in canvas arc ()