这篇文章主要讲解了“小程序怎么创建二次方贝塞尔曲线”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“小程序怎么创建二次方贝塞尔曲线”吧！
创建二次贝塞尔曲线路径。
Tip: 曲线的起始点为路径中前一个点。
| 参数 | 类型 | 说明 |
|---|---|---|
| cpx | Number | 贝塞尔控制点的x坐标 |
| cpy | Number | 贝塞尔控制点的y坐标 |
| x | Number | 结束点的x坐标 |
| y | Number | 结束点的y坐标 |
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()
针对 moveTo(20, 20) quadraticCurveTo(20, 100, 200, 20)的三个关键坐标如下：
红色：起始点(20, 20)
蓝色：控制点(20, 100)
绿色：终止点(200, 20)
感谢各位的阅读，以上就是“小程序怎么创建二次方贝塞尔曲线”的内容了，经过本文的学习后，相信大家对小程序怎么创建二次方贝塞尔曲线这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
