canvas is a tag used to display drawing effects. It is similar to img and is an inline block element.

The same page can have multiple canvas tags

The canvas defaults to 300*150. To set the width and height of the canvas, you need to use the attributes of the canvas element.

After getting the canvas tag in js, you need to use it to open the canvas to draw graphics.

1. First move the pen to the specified position

2. Start drawing lines

3. Stroke path

The pen moves to the specified position (starting point)

draw path

Stroke path

Set stroke color

Set line width

closed path

Clear the current path and open a new path

filling

fill color

* is used to determine which areas belong to the path (if the calculation result is non-0, it means it is within the path). * In the area surrounded by the path, find a random point and emit a ray outward. * intersects all edges surrounding it, * Then start a counter, counting from 0, * If this ray encounters a clockwise surround, then 1, * If encountering a counterclockwise surround, then -1, * If the final value is non-zero, then this area is within the path. * * Note: The area of ​​the cardinal edge must be within the path.