title: CanvasContext.quadraticCurveTo header: develop nav: api

sidebar: canvas_CanvasContext-quadraticCurveTo

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

方法参数

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

示例

扫码体验

sidebar: canvas_CanvasContext-quadraticCurveTo - 图1 请使用百度APP扫码

图片示例

图片

代码示例1

在开发者工具中预览效果

:::codeTab

  1. const canvasContext = swan.createCanvasContext('myCanvas');
  2. // Draw quadratic curve
  3. canvasContext.beginPath();
  4. canvasContext.moveTo(20, 20);
  5. canvasContext.quadraticCurveTo(20, 100, 200, 20);
  6. canvasContext.setStrokeStyle('blue');
  7. canvasContext.stroke();
  9. canvasContext.draw();

:::

代码示例2

在开发者工具中预览效果

:::codeTab

  1. Page({
  2.     onReady: function () {
  3.         const ctx = swan.createCanvasContext('myCanvas')
  4.         // Draw points
  5.         ctx.beginPath()
  6.         ctx.arc(20, 20, 2, 0, 2 * Math.PI)
  7.         ctx.setFillStyle('red')
  8.         ctx.fill()
  10.         ctx.beginPath()
  11.         ctx.arc(200, 20, 2, 0, 2 * Math.PI)
  12.         ctx.setFillStyle('lightgreen')
  13.         ctx.fill()
  15.         ctx.beginPath()
  16.         ctx.arc(20, 100, 2, 0, 2 * Math.PI)
  17.         ctx.setFillStyle('blue')
  18.         ctx.fill()
  20.         ctx.setFillStyle('black')
  21.         ctx.setFontSize(12)
  23.         // Draw guides
  24.         ctx.beginPath()
  25.         ctx.moveTo(20, 20)
  26.         ctx.lineTo(20, 100)
  27.         ctx.lineTo(200, 20)
  28.         ctx.setStrokeStyle('#AAAAAA')
  29.         ctx.stroke()
  31.         // Draw quadratic curve
  32.         ctx.beginPath()
  33.         ctx.moveTo(20, 20)
  34.         ctx.quadraticCurveTo(20, 100, 200, 20)
  35.         ctx.setStrokeStyle('black')
  36.         ctx.stroke()
  38.         ctx.draw()
  39.     }
  40. });

:::