- ·上一篇文章:使用arc()方法在微信小程序canvas中画弧线
- ·下一篇文章:在微信小程序API绘图中创建三次方贝塞尔曲线路径
在微信小程序绘图API中创建二次方贝塞尔曲线
由 ?﹏???ζ???﹏﹏? 创建,youj 最后一次修改 2016-12-24 绘图接口和方法canvasContext.quadraticCurveTo定义创建二次贝塞尔曲线路径。Tip: 曲线的起始点为路径中前一个点。参数参数类型说明cpxNumber贝塞尔控制点的x坐标cpyNumber贝塞尔控制点的y坐标xNumber结束点的x坐标yNumber结束点的y坐标例子const ctx = wx.createCanvasContext('myCanvas')// Draw pointsctx.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 guidesctx.beginPath()ctx.moveTo(20, 20)ctx.lineTo(20, 100)ctx.lineTo(200, 20)ctx.setStrokeStyle('#AAAAAA')ctx.stroke()// Draw quadratic curvectx.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中创建二次方贝塞尔曲线