title: CanvasContext.bezierCurveTo header: develop nav: api

sidebar: canvas_CanvasContext-bezierCurveTo

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

方法参数

参数名 属性 必填 默认值 说明
cp1x Number 是 第一个贝塞尔控制点的 x 坐标
cp1y Number 是 第一个贝塞尔控制点的 y 坐标
cp2x Number 是 第二个贝塞尔控制点的 x 坐标
cp2y Number 是 第二个贝塞尔控制点的 y 坐标
x Number 是 结束点的 x 坐标
y Number 是 结束点的 y 坐标

示例

扫码体验

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

图片示例

图片

代码示例1

在开发者工具中预览效果

:::codeTab

  1. const canvasContext = swan.createCanvasContext('myCanvas');
  2. // Draw quadratic curve
  3. canvasContext.beginPath();
  4. canvasContext.moveTo(20, 20);
  5. canvasContext.bezierCurveTo(20, 100, 200, 100, 200, 20);
  6. canvasContext.setStrokeStyle('black');
  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.arc(200, 100, 2, 0, 2 * Math.PI)
  18.         ctx.setFillStyle('blue')
  19.         ctx.fill()
  21.         ctx.setFillStyle('black')
  22.         ctx.setFontSize(12)
  24.         // Draw guides
  25.         ctx.beginPath()
  26.         ctx.moveTo(20, 20)
  27.         ctx.lineTo(20, 100)
  28.         ctx.lineTo(150, 75)
  30.         ctx.moveTo(200, 20)
  31.         ctx.lineTo(200, 100)
  32.         ctx.lineTo(70, 75)
  33.         ctx.setStrokeStyle('#AAAAAA')
  34.         ctx.stroke()
  36.         // Draw quadratic curve
  37.         ctx.beginPath()
  38.         ctx.moveTo(20, 20)
  39.         ctx.bezierCurveTo(20, 100, 200, 100, 200, 20)
  40.         ctx.setStrokeStyle('black')
  41.         ctx.stroke()
  43.         ctx.draw()
  44.     }
  45. });

:::