小程序canvas曲线和直线

小程序的canvas API可以绘制曲线和直线，具体可以参考以下示例代码：

绘制曲线：

// 获取canvas绘图上下文
const ctx = wx.createCanvasContext('myCanvas')

// 设置起点
ctx.moveTo(50, 200)

// 绘制二次贝塞尔曲线
ctx.quadraticCurveTo(150, 50, 250, 200)

// 设置线条颜色和宽度
ctx.setStrokeStyle('#ff0000')
ctx.setLineWidth(2)

// 绘制曲线
ctx.stroke()

// 绘制起点和控制点
ctx.beginPath()
ctx.arc(50, 200, 3, 0, 2 * Math.PI)
ctx.setFillStyle('#0000ff')
ctx.fill()
ctx.beginPath()
ctx.arc(150, 50, 3, 0, 2 * Math.PI)
ctx.setFillStyle('#0000ff')
ctx.fill()

// 绘制终点和控制点
ctx.beginPath()
ctx.arc(250, 200, 3, 0, 2 * Math.PI)
ctx.setFillStyle('#0000ff')
ctx.fill()
ctx.beginPath()
ctx.moveTo(150, 50)
ctx.lineTo(250, 200)
ctx.setStrokeStyle('#0000ff')
ctx.setLineWidth(1)
ctx.stroke()

// 绘制文字
ctx.setFontSize(20)
ctx.setFillStyle('#000000')
ctx.fillText("Quadratic Curve", 100, 250)

// 绘制完成
ctx.draw()

绘制直线：

// 获取canvas绘图上下文
const ctx = wx.createCanvasContext('myCanvas')

// 设置起点
ctx.moveTo(50, 50)

// 绘制直线
ctx.lineTo(250, 50)

// 设置线条颜色和宽度
ctx.setStrokeStyle('#ff0000')
ctx.setLineWidth(2)

// 绘制直线
ctx.stroke()

// 绘制起点和终点
ctx.beginPath()
ctx.arc(50, 50, 3, 0, 2 * Math.PI)
ctx.setFillStyle('#0000ff')
ctx.fill()
ctx.beginPath()
ctx.arc(250, 50, 3, 0, 2 * Math.PI)
ctx.setFillStyle('#0000ff')
ctx.fill()

// 绘制文字
ctx.setFontSize(20)
ctx.setFillStyle('#000000')
ctx.fillText("Line", 100, 100)

// 绘制完成
ctx.draw()

以上示例代码中，`wx.createCanvasContext('myCanvas')`表示获取canvas绘图上下文，其中'myCanvas'为canvas组件的id。`ctx.moveTo(x, y)`表示设置起点，`ctx.lineTo(x, y)`表示绘制直线，`ctx.quadraticCurveTo(cpx, cpy, x, y)`表示绘制二次贝塞尔曲线。`ctx.setStrokeStyle(color)`和`ctx.setLineWidth(width)`分别设置线条颜色和宽度。`ctx.beginPath()`和`ctx.arc(x, y, r, startAngle, endAngle)`表示绘制圆形起点、终点和控制点。`ctx.setFillStyle(color)`设置填充颜色。`ctx.fillText(text, x, y)`表示绘制文字。`ctx.draw()`表示绘制完成。