Easy way to draw curves using HTML5's Canvas

This article mainly introduces the simple method of using HTML5 Canvas to draw curves. It is the basic knowledge in the introduction to HTML5. Friends who need it can refer to it.

Canvas2D's own curve method

Recently, I am studying the calculation of 3D soft bodies, so I am adding some knowledge. It often involves some numerical analysis, mainly various interpolation algorithms for curves. I suddenly remembered that Canvas2D itself can also draw curves, using quadratic and cube baz curves. Actually, I haven't used this method yet, let's try it now~

This article is just about simple curve drawing, so let’s not talk about a lot of complex principles. Besides, the principle of the Baz Curve itself is very simple, you can understand it by looking at Wikipedia. In fact, many simple curve drawing tools use baz curves. If you have used the curves in Windows' own drawing tools, you must be familiar with them. You can first drag out a straight line and then click a certain position to make the straight line twist. The initial drag action determines the two vertices of the curve, and the click action adds the intermediate point. The drawing tool that comes with Windows uses cubic baz curves, and you can add two intermediate points. The Bate curve is different from the general polynomial interpolation. Its intermediate point is only used as a control point, not the vertex that the curve must pass through. And it can also make closed curves. Canvas2D provides two methods to draw curves

quadraticCurveTo: Quadratic Baze Curve

bezierCurveTo: Cubic Bezel Curve

The line is drawn from the current position, and the current position can be specified by the moveTo method. With the beginning position of the curve, the intermediate point and the end position are also needed. Just pass these position coordinates to the drawing function. For example, a quadratic Batez curve requires an intermediate point and an end position, so two coordinates need to be passed to the quadraticCurveTo function. The coordinates are composed of x and y, which means that this function has 4 parameters. bezierCurveTo is the same, except that it has two intermediate points. Let's use it now