Canvas is often used in charts, games, and active pages.

We can draw graphics on canvas with JS.

First, add the Canvas element to the HTML page.

<canvas id="first" width="500" height="500"></canvas>
Copy the code

This allows you to start drawing using JS.

First get the drawing object provided by the Canvas

const context = first.getContext('2d');
Copy the code

The rect(x, y, w, h) parameters correspond to the upper-left x,y coordinates, width, and height, respectively

BeginPath and closePath are used to set the start and end of the drawing point

FillStyle sets the fill color, and fill means to fill the shape with color.

The context. BeginPath () context. The rect (10, 10, 100, 200); context.fillStyle = 'aqua'; context.fill(); context.closePath();Copy the code

So you have the rectangle

Arc (x, y, R, startAngle, endAngle, anticlockwise) indicates x,y center coordinates, r radius, startAngle is the starting Angle, endAngle is the ending Angle, Anticlockwise Indicates whether the anticlockwise direction is anticlockwise. The default value is no.

StrokeStyle sets the stroke color of the arc, and lineWidth sets the stroke size. A stroke uses the set color for stroke

Context. BeginPath () context. The arc (250250120, Math. PI * 0, Math. PI * 1.9); context.strokeStyle = 'green'; context.lineWidth = '19' context.stroke() context.closePath();Copy the code

And then you have an arc

In addition, circle drawing is also done through arc. Set the Angle from 0 to 360 and fill to create a circle

context.beginPath(); Context. The arc (300300, 30, 0, math.h PI * 2); context.fillStyle="#FF0000"; context.fill(); context.closePath()Copy the code