CanvasContext.quadraticCurveTo

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

方法参数

参数名属性必填默认值说明
cpxNumber贝塞尔控制点的 x 坐标
cpyNumber贝塞尔控制点的 y 坐标
xNumber结束点的 x 坐标
yNumber结束点的 y 坐标

示例

扫码体验

CanvasContext.quadraticCurveTo - 图1请使用百度APP扫码

图片示例

图片

代码示例1

在开发者工具中预览效果

  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();
  8. canvasContext.draw();

代码示例2

在开发者工具中预览效果

  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()
  9. ctx.beginPath()
  10. ctx.arc(200, 20, 2, 0, 2 * Math.PI)
  11. ctx.setFillStyle('lightgreen')
  12. ctx.fill()
  13. ctx.beginPath()
  14. ctx.arc(20, 100, 2, 0, 2 * Math.PI)
  15. ctx.setFillStyle('blue')
  16. ctx.fill()
  17. ctx.setFillStyle('black')
  18. ctx.setFontSize(12)
  19. // Draw guides
  20. ctx.beginPath()
  21. ctx.moveTo(20, 20)
  22. ctx.lineTo(20, 100)
  23. ctx.lineTo(200, 20)
  24. ctx.setStrokeStyle('#AAAAAA')
  25. ctx.stroke()
  26. // Draw quadratic curve
  27. ctx.beginPath()
  28. ctx.moveTo(20, 20)
  29. ctx.quadraticCurveTo(20, 100, 200, 20)
  30. ctx.setStrokeStyle('black')
  31. ctx.stroke()
  32. ctx.draw()
  33. }
  34. });