What is Bezier curve?

Bezier curve is such a curve. It is a smooth curve drawn according to the coordinates of any point in four positions. In history, the people who studied Bezier curve first designed this vector curve drawing method according to the idea of determining four points according to the known curve parameter equation.

What's more interesting about Bezier curve is its "tendon effect", that is to say, with the regular movement of points, the curve will produce the same transformation of tendon extension, bringing visual impact.

In 1962, Pierre B é zier, a French mathematician, first studied the method of drawing curve by vector and gave detailed calculation formula. Therefore, the curve drawn by this formula was named Bessel curve by his surname.

Understanding of the path

In the two-dimensional world, a moving point will form a line, and the process of moving this point is the path, which can be straight or curved. The process of drawing the path in canvas is roughly as follows:

1. Create a path start point
2. Create a path from the starting point to the specified point
3. Render the path with strokes

Method used:

//Start a path, or reset the current path
context.beginPath()

//Move the path to the specified point (x, y) in the canvas without creating a line
context.moveTo(x, y)

//Add a new point and create a line from that point to the last specified point in the canvas
context.lineTo(x, y)

//Create arc / curve
//x: X coordinate of the center of the circle.
//y: Y coordinate of the center of the circle.
//r: radius of the circle.
//sAngle: starting angle, in radians. (the three o'clock position of the circle of the arc is 0 degrees.).
//eAngle: end angle in radians.
//counterclockwise: optional. Specifies whether to plot counterclockwise or clockwise. false = clockwise, true = counter clockwise.
context.arc(x, y, r, sAngle, eAngle, counterclockwise);

//Create an arc / curve between two tangents
//x1: X coordinate of the starting point of the arc
//y1: Y coordinate of the starting point of the arc
//x2: X coordinate of the end point of the arc
//y2: Y coordinate of the end point of the arc
//r: radius of arc
context.arcTo(x1, y1, x2, y2, radius)

//Draw defined path
context.stroke()

What is canvas?

The <canvas> tag in HTML5 is used to draw images (via scripts, usually JavaScript). However, the <canvas> element itself has no drawing ability. It is only a container of graphics. We must use scripts to complete the actual drawing task.

Create canvas element

Add the canvas element to the HTML 5 page and specify the ID, width, and height of the element:

<canvas id="myCanvas" width="200" height="200">
<p>Your browser does not support canvas! </p>
</canvas>

Windows system upgrade, MySQL service is missing, don't panic, the solution is super simple.

Error reporting

Debugging error: the TLS version required by the applet must be greater than or equal to 1.2

Deployment environment

1.Ali cloud

2.windows 2018 server

3.IIS7