Canvas study notes: drawing simple paths

General steps for drawing line segments:

moveTo(x,y) moves the brush to the specified coordinate point (x,y)

lineTo(x,y) uses a straight line to connect the current endpoint and the specified coordinate point (x,y)

stroke() draws the current or existing path according to the current line drawing style

General steps for drawing a rectangular path:

rect(x, y, width, height) rectangular path, coordinate point (x, y), width height

stroke() or fill draws or fills the path according to the current style

You can also use the strokeRect or fillRect mentioned above, or splice it into a rectangle through lineTo.

Let’s first look at the API for drawing arcs:

ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

x, y arc center, radius arc radius, startAngle starting point, endAngle arc end point, anticlockwise defaults to clockwise, true counterclockwise

All rotations in CSS use angles (deg), but the unit used to express angles in the arc function is radians, not angles. JS expressions of angles and radians: radians = (Math.PI/180) * angle (deg).

The radian here is calculated based on the positive direction of the x-axis and the angle of clockwise rotation by default.

Illustration:

(picture from desert)

 ctx.beginPath();ctx.arc(200, 100, 100, 0, Math.PI / 2, false);ctx.closePath();ctx.stroke();ctx.fill();

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.