Js draws a circle on the web page

There are many ways to draw a circle on the web page. SVG and canvas can all be used for plotting. However, this document uses a div instead of the two methods. Div is generally a rectangle, But if you set a rounded corner style border-radius, you can change the div to a circle. The position of the circle is required.

There are many ways to draw a circle on the web page. SVG and canvas can all be used for plotting. However, this document uses a div instead of the two methods. Div is generally a rectangle, But if you set a rounded corner style border-radius, you can change the div to a circle.

The position of the circle must be absolute (position: absolute) in the canvas, that is, by setting the X and Y coordinates, the corresponding css styles are left and top. If you want to take effect from the absolute positioning of the circle, you must set position: relative on the canvas.

 

 

 

Based on the above principle, jQuery can be used to achieve such an interaction: Draw a circle by clicking the left button on the canvas, the center of the circle is the place where the mouse is pressed, and draw the circle with the left mouse clicking the loose.