How to draw Bezier Curve with canvas

Today, I will talk to you about how to use canvas to draw Bezier curves, many people may not know much about it. In order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

1. Quadratic Bezier curve

QuadraticCurveTo (cpx,cpy,x,y) / / cpx,cpy represents the coordinates of the control point, and XQuery represents the end point coordinates.

The mathematical formula is as follows:

The path of the quadratic Bates curve is tracked by the function B (t) of the given points P0, P1, P2:

Code example:

The code is as follows:

Canvas straight line body, H2 {margin:0;} canvas {margin: 20px;} cubic Bezier curve function draw () {var canvas=document.getElementById ('canvas'); var context=canvas.getContext (' 2d'); / / draw start point, control point, end point context.beginPath (); context.moveTo (25175); context.lineTo (60) Context.lineTo (150djm 30); context.lineTo (170150); context.stroke ()

/ / draw a cubic Bezier curve context.beginPath (); context.moveTo (25175); context.bezierCurveTo (60pc80, 150pct, 30170150); context.strokeStyle = "red"; context.stroke ();}

Code effect diagram:

Isn't it a cool effect. HTML5+canvas is such a fun thing.

After reading the above, do you have any further understanding of how to use canvas to draw Bezier curves? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.