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