Line Style 简单讲解
一、Line Style 是什么？
Line Style（线条样式）是 Canvas 2D 上下文中用于控制线条外观的一组属性。它决定了画出来的线长什么样——粗细、颜色、端点形状、拐角样式等。
二、Line Style 包含哪些属性？
| 属性 | 作用 | 默认值 |
|---|---|---|
lineWidth | 线条宽度（像素） | 1 |
strokeStyle | 线条颜色 | "#000000"（黑色） |
lineCap | 线条端点样式 | "butt" |
lineJoin | 线条拐角样式 | "miter" |
miterLimit | 斜接长度限制 | 10 |
lineDash | 虚线样式 | []（实线） |
lineDashOffset | 虚线起始偏移 | 0 |
三、每个属性简单说明
1、lineWidth —— 线宽
ctx.lineWidth = 5; // 设置线宽为5像素
2、strokeStyle —— 颜色
ctx.strokeStyle = "red"; // 颜色名 ctx.strokeStyle = "#ff0000"; // 十六进制 ctx.strokeStyle = "rgb(255,0,0)"; // RGB
3、lineCap —— 端点样式
ctx.lineCap = "butt"; // 平头（默认） ctx.lineCap = "round"; // 圆头 ctx.lineCap = "square"; // 方头（比butt多出一截）
示意图：
butt: ──────── round: ●───────● square: ■───────■
4、lineJoin —— 拐角样式
ctx.lineJoin = "miter"; // 尖角（默认） ctx.lineJoin = "round"; // 圆角 ctx.lineJoin = "bevel"; // 平角
示意图：
miter: \/ round: ⌒ bevel: ┐
5、setLineDash() —— 虚线
ctx.setLineDash([10, 5]); // 画10px，空5px，重复 ctx.setLineDash([]); // 实线（默认）
四、在五子棋代码中的应用
五子棋代码中用到的是：
cav.strokeStyle = "rgb(147,109,70)"; // 设置线条颜色为木棕色 cav.lineWidth = 4; // 设置外框线宽为4像素
这就是 Line Style 的实际应用——棋盘内部小格子用默认线宽（1px）和木棕色，外框用更粗的线宽（4px）来突出显示。
五、总结
| 问题 | 答案 |
|---|---|
| Line Style 是什么？ | 控制线条外观的一组属性 |
| 包含什么？ | 线宽、颜色、端点样式、拐角样式、虚线等 |
| 怎么用？ | 在绘图前设置这些属性 |
| 在棋盘中？ | 设置棋盘颜色和外框粗细 |