CanvasContext.quadraticCurveTo

簡介

CanvasContext.quadraticCurveTo 用于創(chuàng)建二次貝塞爾曲線路徑。曲線的起始點為路徑中前一個點。

掃碼體驗

效果示例

示例代碼

//.js
const ctx = my.createCanvasContext('canvas')


ctx.beginPath()
ctx.arc(30, 30, 2, 0, 2 * Math.PI)
ctx.setFillStyle('red')
ctx.fill()


ctx.beginPath()
ctx.arc(250, 20, 2, 0, 2 * Math.PI)
ctx.setFillStyle('blue')
ctx.fill()


ctx.beginPath()
ctx.arc(30, 200, 2, 0, 2 * Math.PI)
ctx.setFillStyle('green')
ctx.fill()


ctx.setFillStyle('black')
ctx.setFontSize(12)


ctx.beginPath()
ctx.moveTo(30, 30)
ctx.lineTo(30, 150)
ctx.lineTo(250, 30)
ctx.setStrokeStyle('#AAAAAA')
ctx.stroke()


ctx.beginPath()
ctx.moveTo(30, 30)
ctx.quadraticCurveTo(30, 150, 250, 25)
ctx.setStrokeStyle('black')
ctx.stroke()


ctx.draw()

顯示效果如下圖所示：

針對 moveTo(30, 30)quadraticCurveTo(30, 150, 250, 25) 的三個關(guān)鍵坐標(biāo)如下：

• 紅色：起始點(30, 30)
• 藍色：控制點(30, 150)
• 綠色：終止點(250, 25)

入?yún)?/h4>

Object 類型，屬性如下：

屬性	類型	描述
cpx	Number	貝塞爾控制點 x 坐標(biāo)。
cpy	Number	貝塞爾控制點 y 坐標(biāo)。
x	Number	結(jié)束點 x 坐標(biāo)。
y	Number	結(jié)束點 y 坐標(biāo)。