A simple method of drawing curves using HTML5 canvas

Time:2021-12-2

Curve method of canvas 2D
Recently, I’m studying the calculation of 3D soft body, so I’m making up some knowledge. It often involves some numerical analysis, mainly various interpolation algorithms of curves. Suddenly remembered that canvas2d itself can also draw curves, using quadratic and cubic Bezier curves. In fact, I haven’t used this method. Let’s try it now ~
This article is just about simple curve drawing, let’s not talk about a lot of complex principles. Moreover, the principle of Bezier curve itself is very simple, which can be understood by looking at Wikipedia. In fact, many simple curves in drawing tools use Bezier curves. If you have used the curves in Windows’s own drawing tools, you must be familiar with them. You can drag a straight line first, and then click a position to twist the straight line. The initial drag action is to determine the two vertices of the curve, and the click action is to add the middle point. The drawing tool in Windows uses cubic Bezier curve. You can add two intermediate points. Bezier curve is different from general polynomial interpolation. Its middle point is only used as control point, not the vertex that the curve must pass through. And it can also make a closed curve. There are two methods for drawing curves in canvas 2D
Quadraticcurveto: quadratic Bezier curve
BezierCurveTo: cubic Bezier curve
The line is drawn from the current position. You can use the moveto method to specify the current position. With the start position of the curve, you also need the middle point and end position. Pass these position coordinates to the drawing function. For example, a quadratic Bezier curve needs an intermediate point and an end position, so it needs to pass two coordinates to the quadraticcurveto function. The coordinates are composed of X and y, that is, the function has four parameters. Bezier curveto is the same, but it has two middle points. Let’s use it now

CSS CodeCopy contents to clipboard
  1. <canvas id=“canvas” width=“200” height=“200”></canvas>   
  2. <script>   
  3. var g=canvas.getContext(“2d”);   
  4. //Ordinary 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. //Bezier 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 according to the Z-shaped trajectory, the ordinary straight line and Bezier curve are drawn. This is just an ordinary curve. The power of Bezier curve is that it can draw a closed curve, such as such a piece of code

CSS CodeCopy contents to clipboard
  1. g.beginPath();   
  2. g.strokeStyle=“#00F”;   
  3. g.moveTo(100,0);   
  4. g.bezierCurveTo(-100,200, 300,200, 100,0);   
  5. g.stroke();  

The closed curve can be drawn by setting the start position and end position of the cubic Bezier curve to the same point. Because the interpolation direction of the Bezier curve does not follow the coordinate axis, the closed curve can be drawn. If we want polynomial interpolation to draw a closed curve, we have to convert the parameters and use the polar coordinate system.
The examples I use are cubic Bezier curves. In fact, the second time is the same, but without a middle point, I can’t draw what I want. I’ll stop talking a lot. That’s it = =..