HTML 画布曲线
HTML 画布曲线
在画布中绘制曲线的三个最常用的方法是
arc()方法（在 画布圆形 章中描述）quadraticCurveTo()方法bezierCurveTo()方法
quadraticCurveTo() 方法
quadraticCurveTo() 方法用于定义二次贝塞尔曲线。
quadraticCurveTo() 方法具有以下参数
| 参数 | 描述 |
|---|---|
| cpx | 必需。控制点的 x 坐标 |
| cpy | 必需。控制点的 y 坐标 |
| x | 必需。结束点的 x 坐标 |
| y | 必需。结束点的 y 坐标 |
quadraticCurveTo() 方法需要两个点：一个控制点和一个结束点。起点是当前路径中的最后一个点，可以使用 moveTo() 在创建二次贝塞尔曲线之前更改。
要在画布上绘制曲线，请使用以下方法
-
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() 在创建三次贝塞尔曲线之前更改。
要在画布上绘制曲线，请使用以下方法
-
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>
自己尝试 »
