How to create a quadratic Bezier curve in Mini Program

This article mainly explains "how Mini Program creates a quadratic Bezier curve". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought. Let's study and learn how Mini Program creates a quadratic Bezier curve.

CanvasContext.quadraticCurveTo definition

Create a quadratic Bezier curve path.

Tip: the starting point of the curve is the previous point in the path.

Parameter type description x coordinate of cpxNumber Bessel control point x coordinate cpyNumber of Bessel control point x coordinate yNumber end point x coordinate yNumber end point y coordinate example const ctx = wx.createCanvasContext ('myCanvas') / / Draw pointsctx.beginPath () ctx.arc (20,20,2,0,2 * Math.PI) ctx.setFillStyle (' red') ctx.fill () ctx.beginPath () ctx.arc (200,20,2,0 2 * Math.PI) ctx.setFillStyle ('lightgreen') ctx.fill () ctx.beginPath () ctx.arc (20,100,2,0,2 * Math.PI) ctx.setFillStyle (' blue') ctx.fill () ctx.setFillStyle ('black') ctx.setFontSize (12) / / Draw guidesctx.beginPath () ctx.moveTo (20,20) ctx.lineTo (20,100) ctx.lineTo (200,20) ctx.setStrokeStyle (' # AAAAAA') ctx.stroke () / / Draw quadratic curvectx.beginPath () ctx.moveTo (20) 20) ctx.quadraticCurveTo (20,100,200,20) ctx.setStrokeStyle ('black') ctx.stroke () ctx.draw ()

The three key coordinates for moveTo (20,20) quadraticCurveTo (20,100,200,20) are as follows:

Red: starting point (20,20)

Blue: control points (20100)

Green: termination point (200,20)

Thank you for your reading. the above is the content of "how Mini Program creates a quadratic Bezier curve". After the study of this article, I believe you have a deeper understanding of how Mini Program creates a quadratic Bezier curve. The specific use of the situation also needs to be verified by practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!