Canvas 2D 中加实线边框需用 stroke() 绘制路径轮廓，如 rect() 后调用 stroke()；也可用 strokeRect() 快速绘制，注意像素对齐（坐标+0.5）防模糊。
Canvas 2D 绘图中用 stroke() 加实线边框
HTML5 的 本身没有“边框属性”，所谓“加实线边框”实际是用 2D 上下文绘制路径轮廓。核心是先定义形状（如矩形、圆），再调用 stroke() 渲染实线——它默认就是实线，无需额外设样式。
常见错误是只调用 fill() 或漏掉 beginPath()，导致边框不出现或复用旧路径。
-
stroke()前必须有路径：用rect()、arc()或moveTo()/lineTo()定义 - 每次绘制新边框前建议调用
beginPath()，否则可能叠加多条路径影响stroke() -
strokeStyle控制颜色，lineWidth控制粗细，lineCap和lineJoin影响端点与转角样式
示例：画一个 100×60 的带黑边实线矩形
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.rect(10, 10, 100, 60);
ctx.strokeStyle = '#000';
ctx.lineWidth = 2;
ctx.stroke(); // ← 这才是实线边框
border 样式对
如果你只是想给整个 HTML 元素加个 CSS 边框（比如调试布局），直接用 CSS 的 border 属性即可。这和 Canvas 内部绘图无关，属于页面元素的外观控制。
立即学习“前端免费学习笔记（深入）”；
注意：这个边框画在 canvas 元素盒子外部，不影响内部坐标系或绘图内容。
- 实线写法：
border: 2px solid #333（solid是默认值，可省略） - 避免用
outline，它不占布局空间且可能遮盖内容 - 若 canvas 设置了
width/height属性，CSSborder不会挤压绘图区域；但用 CSS 设置宽高会拉伸图像，慎用
用 strokeRect() 快速画实线矩形边框
不需要路径管理时，strokeRect() 是最简方案：一步到位画空心矩形，本质就是 beginPath() + rect() + stroke() 的封装。
它比手动路径更轻量，适合 UI 边框、选区高亮等场景。
- 参数顺序：
strokeRect(x, y, width, height) - 不自动闭合路径，所以不是描边“矩形区域”，而是四条独立线段（左、上、右、下）
- 不能圆角——要圆角边框得用
rect()+stroke()配合lineWidth和lineJoin: 'round'
示例：
ctx.strokeStyle = 'red'; ctx.lineWidth = 3; ctx.strokeRect(20, 20, 120, 80); // 红色实线矩形边框
容易被忽略的像素对齐问题
Canvas 坐标系以像素中心为锚点。当 lineWidth 为奇数（如 1、3）且起始坐标是整数时，线条会跨像素渲染，导致模糊或发虚——这不是 bug，是抗锯齿行为。
要获得锐利实线边框，关键在坐标偏移：
- 把
x、y改成x + 0.5、y + 0.5（例如strokeRect(10.5, 10.5, 100, 60)） - 或统一用偶数
lineWidth（如 2、4），配合整数坐标 - 该问题在高清屏（devicePixelRatio > 1）下更明显，需结合 canvas 缩放逻辑处理
