beziercurveto()必须先调用beginpath()和moveto()设定起点，否则会从残留终点出发导致跳变或不可见；两个控制点仅牵引曲线方向与弯曲程度，不位于曲线上；参数顺序固定为cp1x,cp1y,cp2x,cp2y,x,y，错位将致严重偏移。
bezierCurveTo() 必须接在 moveTo() 之后才能画出预期曲线
直接调用 bezierCurveTo() 而不设置起点，曲线会从上一段路径的终点开始，容易连到意外位置，甚至完全看不见——因为起点可能在画布外或被遮盖。
- 必须先调用
beginPath()清空旧路径，再用moveTo(x, y)显式设起点 - 如果漏掉
moveTo()，而前一次绘图没调beginPath()，bezierCurveTo()就会从那个“残留终点”出发，造成跳变或断线 - 常见错误现象：
stroke()后什么也没显示，或出现一根斜线连到奇怪位置——大概率是起点没设对
两个控制点（cp1x/cp1y 和 cp2x/cp2y）不决定经过位置，只牵引方向和弯曲程度
控制点不是曲线上的一点，而是“力场源”：离起点越近，起始段越陡；离终点越近，结束段越急弯。把它们想象成磁铁，曲线被拉向它们但不会抵达。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 若
cp1x, cp1y和cp2x, cp2y都落在起点与终点连线上，且等距分布，曲线就近似直线 - 想画上拱形弧线？把两个控制点都放在起点-终点连线的上方（比如 y 值更小）
- 想让曲线先平缓后陡峭？把
cp1放得离起点远些，cp2靠近终点 - 调试技巧：临时用
lineTo()连起点→cp1→cp2→终点，画出“控制骨架”，能直观判断牵引逻辑是否合理
参数顺序错一位就完全失效：cp1x,cp1y,cp2x,cp2y,x,y 不能颠倒
bezierCurveTo() 接收且仅接收 6 个数字参数，顺序固定。传错顺序（比如把终点 x 当作 cp1x）会导致曲线严重偏移，甚至朝反方向甩出去。
- 典型误写：
ctx.bezierCurveTo(100, 200, 300, 150, 50, 150)—— 看似像样，但最后一个50, 150是终点，实际却把300, 150当作 cp2，50, 150当作终点，结果远不如预期 - 浏览器不会报错，只会静默绘制一条“看起来很怪”的线——这是最危险的：你不知道它错在哪
- 建议变量命名时带语义，比如：
ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y)，避免裸数字堆砌
连续多段 bezierCurveTo 要注意路径状态管理
一段 bezierCurveTo() 的终点自动成为下一段的起点，这看似方便，实则容易埋坑——尤其当你要画不相连的独立曲线时。
- 画两条分离的贝塞尔曲线，第二条前必须再次
moveTo()，否则会从第一条终点直接连过去 - 频繁切换路径时，别依赖“上一次的 beginPath”——每次新曲线都应显式
beginPath()+moveTo() - 性能提示：多次
beginPath()开销极小，但漏掉它导致重绘整条意外连接路径，反而更耗资源
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
