HTML Canvas 曲线
HTML Canvas 曲线
在 canvas 中绘制曲线最常用的三种方法是：
arc()方法（在 Canvas Circles 章节中已描述）quadraticCurveTo()方法bezierCurveTo()方法
quadraticCurveTo() 方法
quadraticCurveTo() 方法用于定义二次贝塞尔曲线。
quadraticCurveTo() 方法包含以下参数：
| 参数 | 描述 |
|---|---|
| cpx | 必需。控制点的 x 坐标 |
| cpy | 必需。控制点的 y 坐标 |
| x | 必需。终点的 x 坐标 |
| y | 必需。终点的 y 坐标 |
quadraticCurveTo() 方法需要两个点：一个控制点和一个终点。起始点是当前路径中的最后一个点，可以通过在创建二次贝塞尔曲线之前使用 moveTo() 来更改。
要在 canvas 上绘制曲线，请使用以下方法：
-
beginPath()- 开始一个路径 -
moveTo()- 定义起始位置 -
quadraticCurveTo()- 定义二次贝塞尔曲线 -
stroke()- 绘制它
示例
此二次贝塞尔曲线从 moveTo() 指定的点 (10, 100) 开始。控制点位于 (250, 170)。曲线在 (230, 20) 结束。
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(10, 100);
ctx.quadraticCurveTo(250, 170, 230, 20);
ctx.stroke();
</script>
自己动手试一试 »
bezierCurveTo() 方法
bezierCurveTo() 方法用于定义三次贝塞尔曲线。
bezierCurveTo() 方法包含以下参数：
| 参数 | 描述 |
|---|---|
| cp1x | 必需。第一个控制点的 x 坐标 |
| cp1y | 必需。第一个控制点的 y 坐标 |
| cp2x | 必需。第二个控制点的 x 坐标 |
| cp2y | 必需。第二个控制点的 y 坐标 |
| x | 必需。终点的 x 坐标 |
| y | 必需。终点的 y 坐标 |
bezierCurveTo() 方法需要三个点：两个控制点和一个终点。起始点是当前路径中的最后一个点，可以通过在创建三次贝塞尔曲线之前使用 moveTo() 来更改。
要在 canvas 上绘制曲线，请使用以下方法：
-
beginPath()- 开始一个路径 -
moveTo()- 定义起始位置 -
bezierCurveTo()- 定义三次贝塞尔曲线 -
stroke()- 绘制它
示例
此三次贝塞尔曲线从 moveTo() 指定的点 (20, 20) 开始。第一个控制点位于 (110, 150)。第二个控制点位于 (180, 10)。曲线在 (210, 140) 结束。
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.bezierCurveTo(110, 150, 180, 10, 210, 140);
ctx.stroke();
</script>
自己动手试一试 »
