CanvasContext.quadraticCurveTo

简介

CanvasContext.quadraticCurveTo 用于创建二次贝塞尔曲线路径。曲线的起始点为路径中前一个点。

扫码体验

效果示例

示例代码

//.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) 的三个关键坐标如下：

• 红色：起始点(30, 30)
• 蓝色：控制点(30, 150)
• 绿色：终止点(250, 25)

入参

Object 类型，属性如下：