绘图接口和方法

创新互联建站是一家集网站建设,新区企业网站建设,新区品牌网站建设,网站定制,新区网站建设报价,网络营销,网络优化,新区网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

canvasContext.quadraticCurveTo

---

定义

创建二次贝塞尔曲线路径。

Tip: 曲线的起始点为路径中前一个点。

参数

参数	类型	说明
cpx	Number	贝塞尔控制点的x坐标
cpy	Number	贝塞尔控制点的y坐标
x	Number	结束点的x坐标
y	Number	结束点的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)的三个关键坐标如下：

• 红色：起始点(20, 20)
• 蓝色：控制点(20, 100)
• 绿色：终止点(200, 20)

绘图接口和方法

本文标题：创新互联小程序教程：在微信小程序绘图API中创建二次方贝塞尔曲线
网站网址：https://chengdu.cdxwcx.cn/article/ccscjep.html