小程序怎么创建二次方贝塞尔曲线

这篇文章主要讲解了“小程序怎么创建二次方贝塞尔曲线”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“小程序怎么创建二次方贝塞尔曲线”吧！

canvasContext.quadraticCurveTo

定义

创建二次贝塞尔曲线路径。

Tip: 曲线的起始点为路径中前一个点。

参数

例子

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)

感谢各位的阅读，以上就是“小程序怎么创建二次方贝塞尔曲线”的内容了，经过本文的学习后，相信大家对小程序怎么创建二次方贝塞尔曲线这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！