lineCap控制线条两端形状，lineJoin控制线段相交处拐角样式；二者须通过ctx设置且在stroke()前生效：lineCap取值butt（平齐）、round（半圆）、square（方头）；lineJoin取值miter（尖角，受miterLimit限制）、round（圆弧）、bevel（倒角）。
在 HTML5 Canvas 中，lineCap 控制线条**两端的形状**，lineJoin 控制两条线段**相交处的拐角样式**。它们不依赖 CSS，必须通过 2D 绘图上下文（ctx）直接设置，且需在 stroke() 前生效。
lineCap：设置线条端点形状
它影响每条线段起点和终点的“帽子”外观，有三个可选值：
- butt（默认）：端点平齐于最后坐标点，不额外延伸；
-
round：端点为半圆形，直径等于
lineWidth； - square：端点为正方形，从端点向外延伸半个线宽的距离。
示例：ctx.lineCap = "round"; 画一条粗线时，两端会呈现柔和的圆头，适合绘制手绘感或仪表盘指针。
lineJoin：设置线段连接处拐角类型
当连续调用 lineTo() 形成折线时，该属性决定顶点处的拼接方式：
立即学习“前端免费学习笔记（深入）”；
-
miter（默认）：尖角，沿内外角平分线延伸形成斜接；但过小的角度会导致斜接过长，此时需配合
miterLimit限制； - round：用圆弧过渡，视觉最平滑，适合圆润路径；
- bevel：截断尖角，用直线连接两线段外边缘，形成倒角效果。
若使用 miter 且角度极小（如接近 0°），建议设 ctx.miterLimit = 2 或更低，避免异常拉长——超过限制时自动降级为 bevel。
实际使用要点
- 必须在
beginPath()之后、stroke()之前设置，否则无效； - 这些属性是状态量，一旦设置会影响后续所有描边操作，记得按需重置；
- 搭配
lineWidth使用效果更明显，例如lineWidth = 12时，round和butt差异一目了然； - 对
arc()、quadraticCurveTo()等曲线也生效，但只作用于起止端点与路径连接点。
