beziercurveto是html5 canvas中绘制三次贝塞尔曲线的核心方法，需两个控制点和一个终点，配合beginpath()与moveto()使用，通过调整控制点位置可精确控制曲线弯曲形态。
在 HTML5 Canvas 中，bezierCurveTo 是绘制三次贝塞尔曲线的核心方法，它需要两个控制点和一个终点，能生成比 quadraticCurveTo 更灵活、更平滑的曲线。关键不是“画一条线”，而是理解控制点如何牵引路径走向——它们不在线上，却决定曲线的弯曲方向和程度。
基本语法与参数含义
context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
- cp1x / cp1y：第一个控制点坐标（影响起点到中间段的弯曲）
- cp2x / cp2y：第二个控制点坐标（影响中间段到终点的弯曲）
- x / y：曲线终点坐标（实际落在路径上的点）
注意：该方法必须配合 beginPath() 和 moveTo() 使用，起点由 moveTo 定义，不是 bezierCurveTo 的参数。
绘制平滑连接的多段贝塞尔曲线
单条曲线容易生硬；真正平滑的图形（如图标轮廓、手绘感线条）依赖多段曲线首尾相接，并保持切线连续。实现要点：
- 后一段的起点 = 前一段的终点
- 为保证 C1 连续（切线方向一致），前一段的第二个控制点、终点、后一段的第一个控制点应共线，且终点是它们的中点（常见简化做法）
- 例如：画波浪线时，每段用对称控制点，让曲率过渡自然
实用技巧：用控制点“预览”曲线形状
开发调试时可临时画出控制点和辅助线：
- 用
fillRect(cp1x-2, cp1y-2, 4, 4)标出控制点位置 - 用
lineTo(cp1x, cp1y)和lineTo(cp2x, cp2y)连接控制点，观察牵引方向 - 调整控制点远离起点/终点 → 曲线更夸张；靠近 → 更缓和
完整示例：绘制一个平滑心形
心形是典型三次贝塞尔应用，左右两瓣各用一段曲线，共享顶部尖点和底部交汇点：
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(100, 100); // 顶部点
// 左瓣：从顶点出发，向左下弯曲再回到底部
ctx.bezierCurveTo(60, 140, 60, 200, 100, 240);
// 右瓣：从底部点继续，向右上弯曲回顶点（闭合）
ctx.bezierCurveTo(140, 200, 140, 140, 100, 100);
ctx.closePath();
ctx.stroke();
这里左右控制点对称设置，使左右瓣形态一致，交汇处自然平滑。
掌握 bezierCurveTo 的核心在于动手调整控制点——它不像 SVG 那样有可视化编辑器，但正因如此，你对每一段弧度的控制更直接、更精准。多试几次坐标，曲线就从“奇怪”变成“刚好”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
