html5怎么设置边框实线_html52d绘图加实线边框法【详解】-html教程

canvas 2d 中加实线边框需用 stroke() 绘制路径轮廓，如 rect() 后调用 stroke()；也可用 strokerect() 快速绘制，注意像素对齐（坐标+0.5）防模糊。

Canvas 2D 绘图中用 stroke() 加实线边框

HTML5 的 <canvas></canvas> 本身没有“边框属性”，所谓“加实线边框”实际是用 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 样式对 <canvas></canvas> 元素本身生效

如果你只是想给整个 <canvas></canvas> HTML 元素加个 CSS 边框（比如调试布局），直接用 CSS 的 border 属性即可。这和 Canvas 内部绘图无关，属于页面元素的外观控制。

立即学习“前端免费学习笔记（深入）”；

注意：这个边框画在 canvas 元素盒子外部，不影响内部坐标系或绘图内容。