Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.