大學(xué)生新聞網(wǎng)，大學(xué)生新聞發(fā)布平臺(tái)
小程序創(chuàng)建三次方貝塞爾曲線路徑CanvasContext.bezierCurveTo
CanvasContext.bezierCurveTo(number cp1x, number cp1y, number cp2x, number cp2y, number x, number y)
創(chuàng)建三次方貝塞爾曲線路徑。曲線的起始點(diǎn)為路徑中前一個(gè)點(diǎn)。
小程序插件：支持
參數(shù)
number cp1x
第一個(gè)貝塞爾控制點(diǎn)的 x 坐標(biāo)
number cp1y
第一個(gè)貝塞爾控制點(diǎn)的 y 坐標(biāo)
number cp2x
第二個(gè)貝塞爾控制點(diǎn)的 x 坐標(biāo)
number cp2y
第二個(gè)貝塞爾控制點(diǎn)的 y 坐標(biāo)
number x
結(jié)束點(diǎn)的 x 坐標(biāo)
number y
結(jié)束點(diǎn)的 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()
針對(duì) moveTo(20, 20) bezierCurveTo(20, 100, 200, 100, 200, 20) 的三個(gè)關(guān)鍵坐標(biāo)如下：
紅色：起始點(diǎn)(20, 20)
藍(lán)色：兩個(gè)控制點(diǎn)(20, 100) (200, 100)
綠色：終止點(diǎn)(200, 20)
創(chuàng)建三次方貝塞爾曲線路徑。曲線的起始點(diǎn)為路徑中前一個(gè)點(diǎn)。
小程序插件：支持
參數(shù)
number cp1x
第一個(gè)貝塞爾控制點(diǎn)的 x 坐標(biāo)
number cp1y
第一個(gè)貝塞爾控制點(diǎn)的 y 坐標(biāo)
number cp2x
第二個(gè)貝塞爾控制點(diǎn)的 x 坐標(biāo)
number cp2y
第二個(gè)貝塞爾控制點(diǎn)的 y 坐標(biāo)
number x
結(jié)束點(diǎn)的 x 坐標(biāo)
number y
結(jié)束點(diǎn)的 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()
針對(duì) moveTo(20, 20) bezierCurveTo(20, 100, 200, 100, 200, 20) 的三個(gè)關(guān)鍵坐標(biāo)如下：
紅色：起始點(diǎn)(20, 20)
藍(lán)色：兩個(gè)控制點(diǎn)(20, 100) (200, 100)
綠色：終止點(diǎn)(200, 20)
- 作者：大學(xué)生新聞網(wǎng) 來(lái)源：大學(xué)生新聞網(wǎng)
- 發(fā)布時(shí)間：2025-04-14 閱讀：
- 掃一掃 分享悅讀
- 小程序畫布創(chuàng)建一條弧線CanvasContext.arc
- CanvasContext.arc(number x, number y, number r, number sAngle, number eAngle, boolean counterclockwise)
- 04-14 關(guān)注：0
- 小程序創(chuàng)建三次方貝塞爾曲線路徑CanvasContext.bezierCurveTo
- CanvasContext.bezierCurveTo(number cp1x, number cp1y, number cp2x, number cp2y, number x, number y)
- 04-14 關(guān)注：0
- 小程序畫布創(chuàng)建二次貝塞爾曲線路徑CanvasContext.quadraticCurve
- CanvasContext.quadraticCurveTo(number cpx, number cpy, number x, number y)
- 04-14 關(guān)注：1
- 小程序畫布增加一個(gè)新點(diǎn)CanvasContext.lineTo
- CanvasContext.lineTo(number x, number y)增加一個(gè)新點(diǎn)，然后創(chuàng)建一條從上次指定點(diǎn)到目標(biāo)點(diǎn)的線。用 stroke 方法來(lái)畫線條
- 04-14 關(guān)注：1
- 小程序把路徑移動(dòng)到畫布中的指定點(diǎn)CanvasContext.moveTo
- CanvasContext.moveTo(number x, number y)
- 04-14 關(guān)注：1
- 小程序畫布開始創(chuàng)建一個(gè)路徑CanvasContext.beginPath
- 開始創(chuàng)建一個(gè)路徑。需要調(diào)用 fill 或者
stroke 才會(huì)使用路徑進(jìn)行填充或描邊 - 04-14 關(guān)注：1
- 小程序畫布恢復(fù)之前保存的繪圖上下文 CanvasContext.restore()
- const ctx = wx.createCanvasContext('myCanvas')
- 04-12 關(guān)注：3
- 小程序畫布保存繪圖上下文CanvasContext.save
- const ctx = wx.createCanvasContext('myCanvas')
- 04-12 關(guān)注：4
-
客服QQ：471708534 大學(xué)生新聞網(wǎng)©版權(quán)所有