小程序創(chuàng)建三次方貝塞爾曲線路徑CanvasContext.bezierCurveTo

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

小程序插件：支持
參數(shù)
number cp1x
第一個貝塞爾控制點的 x 坐標(biāo)

number cp1y
第一個貝塞爾控制點的 y 坐標(biāo)

number cp2x
第二個貝塞爾控制點的 x 坐標(biāo)

number cp2y
第二個貝塞爾控制點的 y 坐標(biāo)

number x
結(jié)束點的 x 坐標(biāo)

number y
結(jié)束點的 y 坐標(biāo)

示例代碼

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) 的三個關(guān)鍵坐標(biāo)如下：

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