A Simple Method for drawing curves using HTML5 Canvas, html5canvas

A Simple Method for drawing curves using HTML5 Canvas, html5canvas
This article mainly introduces the Simple Method of Drawing curves using HTML5 Canvas. It is the basic knowledge of HTML5 beginners. For more information, see

Canvas2D built-in Curve Method
Recently, I have been studying the computation of 3D soft bodies, so I am trying to make up some knowledge. It often involves some numerical analysis, mainly the various interpolation algorithms of curves. Suddenly remembered that Canvas2D itself can also draw a curve, using a quadratic and cubic Beitz curve. In fact, I have never used this method. Please try it now ~
This article is just about simple curve drawing, so we will not talk about a lot of complicated principles. Besides, the theory of the beiz curve is very simple. You can see it on Wikipedia. In fact, many simple plot tools use the Beitz curve to draw simple curves. If you have used the windows built-in drawing tools, the curves will be no stranger. You can drag a straight line first, and then click a position to distort the line. The first drag action is to determine the two vertices of the curve, and the click action is to add the intermediate point. The drawing tool that comes with windows uses a three-Byz curve. You can add two intermediate points. Unlike ordinary polynomial interpolation, The Beitz curve uses the center point as the control point rather than the vertex that must pass through the curve. It can also make closed curves. There are two methods to draw curves in Canvas2D.
QuadraticCurveTo: quadratic Beitz Curve
BezierCurveTo: Cubic Beitz Curve
The line is drawn from the current position. You can use the moveTo method to specify the current position. With the starting position of the curve, the center and end position are also required. Pass the coordinates of these locations to the drawing function. For example, a quadratic Beitz curve requires an intermediate point and an end point. Therefore, two coordinates must be transmitted to the quadraticCurveTo function. Coordinates are composed of x and y. That is to say, this function has four parameters. BezierCurveTo is the same, but it has two intermediate points. Let's use it.

Copy the content to the clipboard using CSS Code.

1. <Canvas id = "canvas" width = "200" height = "200"> </canvas>
2. <Script>
3. Var g = canvas. getContext ("2d ");
4. // A straight line
5. G. beginPath ();
6. G. strokeStyle = "# CCC ";
7. G. moveTo (0, 0 );
8. G. lineTo (200,0 );
9. G. lineTo (0,200 );
10. G. lineTo (200,200 );
11. G. stroke ();
12. // Beitz Curve
13. G. beginPath ();
14. G. strokeStyle = "# F00 ";
15. G. moveTo (0, 0 );
16. G. bezierCurveTo (0,200,200,200, 0 );
17. G. stroke ();
18. </Script>

The four points are given based on the Z-shaped trajectory, and the common straight line and the Bez curve are drawn. This is just a normal curve. The major advantage of the Beitz curve is that it can draw a closed curve, such as such a piece of code.

Copy the content to the clipboard using CSS Code.

1. G. beginPath ();
2. G. strokeStyle = "# 00F ";
3. G. moveTo (100,0 );
4. G. bezierCurveTo (-100,200,300,200,100, 0 );
5. G. stroke ();

Set the start position and end position of the Three-Byz curve to the same point to draw a closed curve. Because the interpolation direction of the Beitz curve is not based on the coordinate axis, you can draw a closed curve. If you want Polynomial Interpolation to plot a closed curve, you have to convert the parameters and use the polar coordinate system.
The examples I used are all cubic Beitz curves. In fact, the same is true for the second time, but I can't draw what I want without a middle point. I don't have to worry about it any more. This article is like this = ..