The previous article said that rectangle is the only native drawing method provided by HTML5 canvas, which is not entirely true, because Google browser provides the method of drawing ellipse.

Draw ellipse

Drawing method:

//Draw ellipse
//x: X axis coordinate of the center of the ellipse.
//y: Y coordinate of the center of the ellipse.
//radiusX: radius of the major axis of the ellipse.
//radiusY: radius of the minor axis of the ellipse.
//rotation: the angle of rotation of the ellipse in radians (non angular degrees).
//startAngle: the angle of the starting point to be drawn, measured from the X axis, in radians (non angle degrees).
//endAngle: the angle of the end point at which the ellipse will be drawn, in radians (non angle degrees).
//anticlockwise: optional. If it is true, draw the ellipse anticlockwise, and vice versa.
context.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);

All graphics need to be drawn by path, while HTML5 canvas supports a kind of native graphics drawing - rectangle, and only supports this kind.

How to draw a rectangle:

//Create rectangle
//x: X coordinate of the upper left corner of the rectangle
//y: Y coordinate of the upper left corner of the rectangle
//width: the width of the rectangle in pixels
//height: the height of the rectangle in pixels
context.rect(x, y, width, height)

//Draw a filled rectangle
//x: X coordinate of the upper left corner of the rectangle
//y: Y coordinate of the upper left corner of the rectangle
//width: the width of the rectangle in pixels
//height: the height of the rectangle in pixels
context.fillRect(x, y, width, height)

//Draw a rectangular border
//x: X coordinate of the upper left corner of the rectangle
//y: Y coordinate of the upper left corner of the rectangle
//width: the width of the rectangle in pixels
//height: the height of the rectangle in pixels
context.strokeRect(x, y, width, height)

//Clears the specified rectangular area, which then becomes completely transparent.
//x: X coordinate of the upper left corner of the rectangle
//y: Y coordinate of the upper left corner of the rectangle
//width: the width of the rectangle in pixels
//height: the height of the rectangle in pixels
context.clearRect(x, y, width, height);

On the understanding of graphics

When one or more paths intersect to produce a closed loop, a graph will be formed. Therefore, the basic element of the figure is the path, and drawing the figure in canvas is to close the path, and then render the figure by tracing or filling the path area.

Closed path

Closure method:

//Create a path from the current point to the start point
context.closePath();

A closed path is a path that creates the end and start points in the current path. Use an example in the Path to do a close test...

What is Bezier curve?

Bezier curve is such a curve. It is a smooth curve drawn according to the coordinates of any point in four positions. In history, the people who studied Bezier curve first designed this vector curve drawing method according to the idea of determining four points according to the known curve parameter equation.

What's more interesting about Bezier curve is its "tendon effect", that is to say, with the regular movement of points, the curve will produce the same transformation of tendon extension, bringing visual impact.

In 1962, Pierre B é zier, a French mathematician, first studied the method of drawing curve by vector and gave detailed calculation formula. Therefore, the curve drawn by this formula was named Bessel curve by his surname.

Understanding of the path

In the two-dimensional world, a moving point will form a line, and the process of moving this point is the path, which can be straight or curved. The process of drawing the path in canvas is roughly as follows:

1. Create a path start point
2. Create a path from the starting point to the specified point
3. Render the path with strokes

Method used:

//Start a path, or reset the current path
context.beginPath()

//Move the path to the specified point (x, y) in the canvas without creating a line
context.moveTo(x, y)

//Add a new point and create a line from that point to the last specified point in the canvas
context.lineTo(x, y)

//Create arc / curve
//x: X coordinate of the center of the circle.
//y: Y coordinate of the center of the circle.
//r: radius of the circle.
//sAngle: starting angle, in radians. (the three o'clock position of the circle of the arc is 0 degrees.).
//eAngle: end angle in radians.
//counterclockwise: optional. Specifies whether to plot counterclockwise or clockwise. false = clockwise, true = counter clockwise.
context.arc(x, y, r, sAngle, eAngle, counterclockwise);

//Create an arc / curve between two tangents
//x1: X coordinate of the starting point of the arc
//y1: Y coordinate of the starting point of the arc
//x2: X coordinate of the end point of the arc
//y2: Y coordinate of the end point of the arc
//r: radius of arc
context.arcTo(x1, y1, x2, y2, radius)

//Draw defined path
context.stroke()