miter 尖角详细讲解

---

一、什么是 miter？

miter 是 Canvas 2D 上下文中 lineJoin 属性的三个可选值之一，它指定了两条线段连接处的样式为尖角。当两条线相交时，它们的外边缘会延长直到相遇，形成一个尖锐的角。

---

二、词源解析

单词	词源	含义
miter	希腊语 mitra（头带）→ 拉丁语 mitra（主教冠）	尖角、斜接

词源故事：

• 原指主教戴的尖顶帽（两边尖尖的）

• 在木工中，指两块木头45度斜角对接的接缝

• 在几何学中，指两条线延长相交形成的尖角

---

三、语法

ctx.lineJoin = "miter";  // 尖角样式（默认值）

---

四、miter 的工作原理

示意图

两条线相交：
    \
     \
      \← 交点
       \
        \
         \

miter 尖角效果：
    \    /
     \  /
      \/ ← 外边缘延长相交形成的尖点

如何形成尖角？

1. 两条线段在交点处连接

2. 每条线段都有一定的宽度（lineWidth）

3. 线段的内边缘在交点处相遇

4. 线段的外边缘会延长直到相交

5. 这个延长相交的点就是尖角的顶点

---

五、三种拐角样式对比

值	效果	特点	适用场景
miter	尖角	外边缘延长相交	建筑、几何图形、棋盘
round	圆角	用圆弧连接	图标、按钮、柔边设计
bevel	平角	切平外角	工程图、技术图纸

视觉对比

六、代码示例

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.lineWidth = 20;  // 粗线更容易看清拐角
// 画一个尖角 (miter)
ctx.beginPath();
ctx.strokeStyle = 'blue';
ctx.lineJoin = 'miter';
ctx.moveTo(50, 100);
ctx.lineTo(150, 50);   // 第一条线
ctx.lineTo(250, 100);  // 第二条线
ctx.stroke();
// 画一个圆角 (round) 作对比
ctx.beginPath();
ctx.strokeStyle = 'red';
ctx.lineJoin = 'round';
ctx.moveTo(50, 200);
ctx.lineTo(150, 150);
ctx.lineTo(250, 200);
ctx.stroke();
// 画一个平角 (bevel) 作对比
ctx.beginPath();
ctx.strokeStyle = 'green';
ctx.lineJoin = 'bevel';
ctx.moveTo(50, 300);
ctx.lineTo(150, 250);
ctx.lineTo(250, 300);
ctx.stroke();

---

七、miterLimit 与尖角的关系

什么是 miterLimit？

当两条线夹角非常小时，miter 尖角会变得特别长，可能超出预期。miterLimit 就是用来限制尖角长度的。

ctx.miterLimit = 10;  // 默认值 10

计算公式

miter长度 = lineWidth / sin(夹角/2)

何时生效？

• 如果计算出的尖角长度 ≤ miterLimit × lineWidth，显示 miter 尖角

• 如果尖角长度 > miterLimit × lineWidth，自动转为 bevel 平角

极端情况示例

ctx.lineWidth = 10;
ctx.lineJoin = 'miter';
ctx.miterLimit = 2;  // 允许尖角最大为 20 像素
// 夹角很小（约10度）
ctx.moveTo(100, 100);
ctx.lineTo(150, 100);
ctx.lineTo(151, 90);  // 很小的角度
// 尖角长度 ≈ 10 / sin(5°) ≈ 115 像素 > 20
// 实际会显示为 bevel 平角，而不是 miter 尖角

---

八、在五子棋代码中的应用

五子棋代码中虽然没有直接设置 lineJoin，但绘制外框矩形时：

cav.lineWidth = 4;
cav.strokeRect(100, 70, 330, 330);

这里使用的是默认值 miter，所以矩形的四个角是尖角。这符合传统棋盘的视觉效果——方方正正，边界清晰。

如果改成 round，棋盘四角会变成圆角，看起来就像“儿童棋盘”或“卡通棋盘”，不够正式。

---

九、总结

问题	答案
miter 是什么？	线条拐角的尖角样式
效果如何？	外边缘延长相交形成尖角
默认值？	是 Canvas 的默认值
什么时候用？	需要锐利、清晰的拐角时
和 miterLimit 的关系？	限制尖角长度，防止过长
在棋盘中？	让棋盘外框四个角保持方正