创建二次贝塞尔曲线路径。
tip: 曲线的起始点为路径中前一个点。
参数 | 类型 | 说明 |
---|---|---|
cpx | number | 贝塞尔控制点的x坐标 |
cpy | number | 贝塞尔控制点的y坐标 |
x | number | 结束点的x坐标 |
y | number | 结束点的y坐标 |
const ctx = wx.createcanvascontext('mycanvas')
// draw points
ctx.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 guides
ctx.beginpath()
ctx.moveto(20, 20)
ctx.lineto(20, 100)
ctx.lineto(200, 20)
ctx.setstrokestyle('#aaaaaa')
ctx.stroke()
// draw quadratic curve
ctx.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)
的三个关键坐标如下: