Canvas画实线边框需用strokeRect()或beginPath()+rect()+stroke()，注意设置strokeStyle、lineWidth及坐标对齐（如+0.5），避免模糊；非矩形边框须手动构建路径。
Canvas 里画实线边框，不是靠 CSS 的 border，得用绘图 API 手动描边。
用 strokeRect() 快速画矩形实线边框
这是最直接的方式：指定左上角坐标和宽高，Canvas 自动以当前描边样式画出矩形边框。
-
ctx.strokeStyle控制颜色（默认是#000） -
ctx.lineWidth控制线宽（默认是1.0，注意不是像素整数，可设1.5） -
ctx.lineCap和ctx.lineJoin影响转角和端点形状（默认都是"butt"和"miter"） - 调用前必须先设置好样式，否则用的是上次遗留值
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = '#333';
ctx.lineWidth = 2;
ctx.strokeRect(10, 10, 200, 100);
用 beginPath() + rect() + stroke() 更灵活控制
当需要叠加其他路径、加阴影、或后续要填充内部时，推荐这种显式路径方式。它和 strokeRect() 效果一致，但更可控。
-
rect(x, y, w, h)是“添加矩形子路径”，不自动闭合也不自动绘制 - 必须配对使用
beginPath()，否则会累加之前所有路径，导致意外重绘 -
stroke()只描边，不影响填充状态；若同时要填充，得额外调用fill() - 如果只画边框，别误写成
fillRect()——那是实心填充，不是描边
ctx.beginPath(); ctx.rect(50, 50, 150, 80); ctx.strokeStyle = 'red'; ctx.lineWidth = 3; ctx.stroke();
为什么设置了 lineWidth 却看起来模糊或偏细？
Canvas 像素对齐问题最常见：当坐标不是 .5 结尾（如 10），而 lineWidth 是奇数时，浏览器会在两个物理像素间插值，造成半透明模糊边。
立即学习“前端免费学习笔记（深入）”；
- 解决办法：把坐标改成
x + 0.5/y + 0.5（例如strokeRect(10.5, 10.5, 200, 100)） - 仅在设备像素比为 1 的屏幕明显；高 DPR 屏幕（如 Retina）下影响减弱，但统一加 .5 更稳妥
- 不要依赖 CSS 缩放 canvas 来“变粗”边框——那会整体模糊图形，且无法精确控制线宽
-
ctx.scale(2, 2)后再画，lineWidth也会被放大，但需同步调整坐标，容易出错
非矩形边框？用 moveTo() + lineTo() 手动画
圆角矩形、多边形、不规则轮廓都得走路径 API。实线本质就是连续的直线段描边。
- 每段线之间用
lineTo()连接，起点用moveTo()定位 - 闭合路径用
closePath()，否则最后一段不连回起点 - 圆角矩形可用
rect()配合clip()+arcTo()，但复杂度陡增；简单场景建议用 CSSborder-radius包裹 canvas 元素作视觉补偿 - 抗锯齿默认开启，若要硬边（如像素风），可设
ctx.imageSmoothingEnabled = false，但这对描边本身无效，只影响 drawImage
ctx.beginPath(); ctx.moveTo(20, 20); ctx.lineTo(120, 20); ctx.lineTo(120, 120); ctx.lineTo(20, 120); ctx.closePath(); ctx.strokeStyle = 'blue'; ctx.lineWidth = 1; ctx.stroke();
真正容易被忽略的，是 beginPath() 的调用时机和坐标对齐——漏掉前者会导致路径叠加，坐标准确性则直接决定边框是否锐利。这两点没处理好，再调样式也没用。
