beginPath()用于清空旧路径并开启新路径，stroke()则按当前样式将路径真正绘制出来；不调用beginPath()会导致路径叠加，不调用stroke()则路径仅存于内存不显示。
在 HTML5 的 Canvas 中，beginPath() 和 stroke() 是绘制自定义线条路径的核心方法。简单说：beginPath() 用来“清空旧路径并开启新路径”，stroke() 则是“把当前路径真正画出来”。不调用 beginPath() 就直接画线，容易叠加、重绘出错；不调用 stroke()，路径就只是存在内存里，根本不会显示。
先准备 canvas 和上下文
确保你有合法的 <canvas> 元素，并获取 2D 渲染上下文：
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
</script>
用 beginPath() 开启一条新路径
beginPath() 不接收参数，作用是重置当前路径状态——清除上一次的路径点、样式设置（如 lineCap、lineJoin）不会被重置，但路径本身会被清空。每次想画一条独立的新线，都应先调用它。
- 不调用
beginPath()就连续调用moveTo()/lineTo()，新线会自动接在旧路径末尾，形成一条长路径 - 如果只改颜色或线宽再
stroke()，整条累积路径都会按新样式重绘，容易误触发
用 moveTo() 和 lineTo() 构建路径点
路径由点和连接方式组成：
立即学习“前端免费学习笔记（深入）”；
-
moveTo(x, y)：把“画笔”移到起点（不画线） -
lineTo(x, y)：从当前位置画直线到指定点 - 还可配合
arc()、quadraticCurveTo()等添加曲线段
例如画一个带折角的 Z 字形：
ctx.beginPath(); // 开启新路径 ctx.moveTo(50, 50); // 起点 ctx.lineTo(150, 50); // 横线 ctx.lineTo(50, 150); // 斜线（右上→左下） ctx.lineTo(150, 150); // 底横线 ctx.stroke(); // 描边，此时才真正绘制
stroke() 才让路径可见
stroke() 按当前样式（strokeStyle、lineWidth、lineCap 等）描边当前路径。它不改变路径，也不清空路径 —— 所以可以多次 stroke() 同一路径（比如加粗或换色描边），也可以在 stroke() 后继续用 lineTo() 延伸路径再描一次。
- 若想填充闭合区域，用
fill()（需先closePath()或手动首尾相连） - 仅描边不填充时，无需闭合路径
- 调用
stroke()后路径仍存在，如需彻底清理，必须再次beginPath()
