fillRect(x, y, width, height)draw a filled rectangle
strokeRect(x, y, width, height)draw a rectangular border
clearRect(x, y, width, height)Clears the specified rectangular area, making the cleared part completely transparent.
beginPath()Create a new path. After generation, the graphics drawing command is directed to the path to generate the path.
closePath()After closing the path, graphics drawing commands are re-directed to the context.
stroke()Drawing outlines with lines.
fill()Generates a solid shape by filling the content area of a path.
To draw a straight line, the method you need to use lineTo().
lineTo(x, y)
This method takes two parameters: x and y, which represent the point in the coordinate system where the line ends. The start point is related to the previous drawn path, the end point of the previous path is the next start point, and so on. . . The starting point can also be moveTo()changed by the function.
To draw arcs or circles, we use arc()methods.
arc(x, y, radius, startAngle, endAngle, anticlockwise)
Draw an arc (circle) with (x, y) as the center and radius as the radius, starting from startAngle and ending at endAngle, and generated according to the direction given by anticlockwise (the default is clockwise).
Note: arc()The unit of angle in the function is radians, not degrees. The js expression of angle and radian: radians=(Math.PI/180)*degrees.