How does WeChat Mini Programs create the path of cubic Bezier Curve
This article introduces the relevant knowledge of "how to create a cubic Bezier curve path by WeChat Mini Programs". In the operation of actual cases, many people will encounter such a dilemma. Next, let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!
CanvasContext.bezierCurveTo definition
Create a cubic Bezier curve path.
Tip: the starting point of the curve is the previous point in the path.
Parameter type description cp1xNumber first Bezier control point x coordinate cp1yNumber first Bezier control point y coordinate cp2xNumber second Bessel control point x coordinate cp2yNumber x coordinate xNumber 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.arc (200,100,2,0) 2 * Math.PI) ctx.setFillStyle ('blue') ctx.fill () ctx.setFillStyle (' black') ctx.setFontSize (12) / Draw guidesctx.beginPath () ctx.moveTo (20,100) ctx.lineTo (20,100) ctx.lineTo (150,75) ctx.moveTo (200,20) ctx.lineTo (200,100) ctx.lineTo (70,75) ctx.setStrokeStyle ('# AAAAAA') ctx.stroke () / / Draw quadratic curvectx.beginPath () ctx.moveTo (20,20) ctx.bezierCurveTo (20,100,200,100) 200,20) ctx.setStrokeStyle ('black') ctx.stroke () ctx.draw ()
The three key coordinates for moveTo (20,20) bezierCurveTo (20,100,200,100,200,20) are as follows:
Red: starting point (20,20)
Blue: two control points (20100) (200100)
Green: termination point (200,20)
This is the end of the introduction to "how WeChat Mini Programs creates a cubic Bezier curve path". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!
