A simple way to draw curves using HTML5 canvas

Curve method of canvas2d self-band

Recently in the study of 3D soft body calculation, so crazy to fill some knowledge. Often involves some numerical analysis of things, mainly the curve of various interpolation algorithms. It suddenly occurred to me that the canvas2d itself was also able to draw curves, using two times and three Bezier curves. In fact, I have not used it for this method, now to try it ~

This is just a simple curve drawing, let's not say a lot of complicated principles. Moreover, the principle of the Bézier curve is simple enough to see Wikipedia. In fact, a lot of drawing tools in the simple curve drawing is the use of the Bézier curve, if you have used windows with the drawing tool in the curve is not unfamiliar. You can drag a line first, and then click a position to distort the line. The first drag action is to determine the two vertices of the curve, click action is to add the middle point. The graphics tool you use in Windows is three Bezier curves, and you can add two middle points. The Bezier curve differs from the general polynomial interpolation, and its middle point is only used as a control point, not the vertex that the curve must pass through. And it can also make a closed curve. There are two ways to draw curves in canvas2d

Quadraticcurveto: two times Bézier curve

Beziercurveto: three times Bézier curve

The line is drawn from the current location, and you can use the MoveTo method to specify the current position. With the beginning of the curve, you need the middle point and the end position. Pass these position coordinates to the drawing function. For example, the two Bezier curve requires an intermediate point and an end position, so we have to pass two coordinates to the Quadraticcurveto function. Coordinates are made up of X and Y, which means that the function has 4 parameters. Beziercurveto is the same, except that it has two middle points. Let's use the following to see

　CSS Code copy content to clipboard

1. <canvas id="Canvas" width= "" " height=" ></canvas>
2. <script>
3. var G=canvas.getcontext ("2d");
4. Plain 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. Bézier curve
13. G.beginpath ();
14. g.strokestyle="#F00";
15. G.moveto (0,0);
16. G.beziercurveto (200,0, 0,200, 200,200);
17. G.stroke ();
18. </script>

Given four points in the zigzag trajectory, the normal line and Bézier curve are drawn. This is just a normal curve, the point of the Bézier curve is that it can draw a closed curve, such as a piece of code

CSS code copy content to clipboard

G.beginpath ();

G.strokestyle= "#00F";

G.moveto (100,0);

G.beziercurveto (-100,200, 300,200, 100,0);

G.stroke ();

A closed curve can be drawn by setting the starting and ending positions of the three Bezier curves to the same point. Because the interpolation direction of the Bézier curve is not based on the axes, the closed curve can be drawn. If you want polynomial interpolation to draw a closed curve, we have to convert the parameters and use polar coordinates to do it.

The examples I use are three Bezier curves. In fact, the same two times, but a middle point is missing a picture of what I want. I will not have a lot of chatter, this article on the bar = =.