小程序創建三次方貝塞爾曲線路徑CanvasContext.bezierCurveTo

CanvasContext.bezierCurveTo(number cp1x, number cp1y, number cp2x, number cp2y, number x, number y)
創建三次方貝塞爾曲線路徑。曲線的起始點為路徑中前一個點。

小程序插件：支持
參數
number cp1x
第一個貝塞爾控制點的 x 坐標

number cp1y
第一個貝塞爾控制點的 y 坐標

number cp2x
第二個貝塞爾控制點的 x 坐標

number cp2y
第二個貝塞爾控制點的 y 坐標

number x
結束點的 x 坐標

number y
結束點的 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.arc(200, 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(150, 75)
 
ctx.moveTo(200, 20)
ctx.lineTo(200, 100)
ctx.lineTo(70, 75)
ctx.setStrokeStyle('#AAAAAA')
ctx.stroke()
 
// Draw quadratic curve
ctx.beginPath()
ctx.moveTo(20, 20)
ctx.bezierCurveTo(20, 100, 200, 100, 200, 20)
ctx.setStrokeStyle('black')
ctx.stroke()
 
ctx.draw()


針對 moveTo(20, 20) bezierCurveTo(20, 100, 200, 100, 200, 20) 的三個關鍵坐標如下：

紅色：起始點(20, 20)
藍色：兩個控制點(20, 100) (200, 100)
綠色：終止點(200, 20)