CanvasContext.quadraticCurveTo

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

# 方法参数

参数名 属性 必填 默认值 说明
cpx Number 贝塞尔控制点的 x 坐标
cpy Number 贝塞尔控制点的 y 坐标
x Number 结束点的 x 坐标
y Number 结束点的 y 坐标

# 示例

扫码体验
重新加载
请使用百度APP扫码

# 图片示例

图片

# 代码示例 1

    <canvas canvas-id="myCanvas" class="myCanvas" />
    
    Page({
        onLoad() {
            const canvasContext = swan.createCanvasContext('myCanvas');
            // Draw quadratic curve
            canvasContext.beginPath();
            canvasContext.moveTo(20, 20);
            canvasContext.quadraticCurveTo(20, 100, 200, 20);
            canvasContext.setStrokeStyle('blue');
            canvasContext.stroke();
    
            canvasContext.draw();
        }
    });
    

    # 代码示例 2

      <canvas canvas-id="myCanvas" class="myCanvas" />
      
      Page({
          onReady: function () {
              const ctx = swan.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()
          }
      });