本文详解 canvas 绘图时因坐标超出画布边界导致图形“消失”的常见问题，通过修正坐标、优化绘图逻辑，实现多个独立 canvas 元素（如圆形和矩形）稳定、互不遮挡地同时显示。
本文详解 canvas 绘图时因坐标超出画布边界导致图形“消失”的常见问题，通过修正坐标、优化绘图逻辑，实现多个独立 canvas 元素（如圆形和矩形）稳定、互不遮挡地同时显示。
在 HTML 中使用多个 <canvas> 元素绘制不同图形（如圆形和矩形）时，一个典型误区是：误以为图形会自动适配画布尺寸，而忽略了 Canvas 坐标系的原点（0, 0）位于左上角，且所有绘图操作均受限于其 width 和 height 属性定义的实际渲染区域。
在原始代码中，第一个 Canvas（id="canvas1"）被设置为 width="800" height="250"，但圆形使用了 ctx.arc(300, 300, 50, ...) —— 其圆心 Y 坐标为 300，已远超画布高度 250px，导致整个圆形（包括边缘）完全绘制在画布可视区域之外，因此“不可见”，并非被矩形遮盖，而是根本未渲染出来。
✅ 正确做法是：确保所有绘图坐标的 X 和 Y 值均落在 [0, canvas.width) 和 [0, canvas.height) 范围内。例如，将圆心改为 (100, 100)，半径 50，则图形完整位于 canvas1 内（100±50 → [50, 150]，均在 0–250 范围内）。
此外，还需注意两个关键细节：
fill() 与 stroke() 的调用顺序和路径闭合：
ctx.fill() 和 ctx.stroke() 都作用于当前路径（path）。虽然 arc() 自动创建闭合路径，但显式调用 ctx.closePath() 并非必须；不过，若后续复用路径或添加其他形状，建议在每次绘制前调用 ctx.beginPath()（已正确使用），避免意外连接。渐变定义坐标需与绘图区域匹配：
原代码中 createRadialGradient(300, 300, 50, 300, 300, 5) 的中心点仍为 (300, 300)，但此时圆心已移至 (100, 100)。若要使渐变聚焦于圆形中心，应同步更新渐变坐标：
// ✅ 修正后的圆绘制（含匹配渐变）
var circle = document.getElementById('canvas1');
var ctx = circle.getContext('2d');
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI); // 圆心在画布内
ctx.stroke();
// 渐变中心同步改为 (100, 100)
var grd = ctx.createRadialGradient(100, 100, 0, 100, 100, 50);
grd.addColorStop(0, '#fff'); // 外圈亮色
grd.addColorStop(1, '#000'); // 内圈深色
ctx.fillStyle = grd;
ctx.fill();对于矩形部分（canvas2），其 rect(200, 10, 200, 40) 坐标 (200, 10) 完全合法（Y=10 在 height="300" 范围内），因此无需调整，但建议线性渐变方向也适配实际矩形位置：
// ✅ 更合理的线性渐变（沿矩形方向） var grd2 = ctx2.createLinearGradient(200, 10, 400, 50); // 左上→右下对角 grd2.addColorStop(0, "black"); grd2.addColorStop(1, "white"); ctx2.fillStyle = grd2; ctx2.fill();
? 总结与最佳实践：
- ? 不要复用超出画布边界的坐标；
- ✅ 绘制前始终校验 (x, y) 是否满足 0 ≤ x < canvas.width 且 0 ≤ y < canvas.height；
- ✅ 渐变/阴影等效果的坐标系与绘图坐标系一致，需同步调整；
- ✅ 多 Canvas 布局时，各元素相互独立，不存在 Z 轴遮挡（除非 CSS 设置 z-index 或重叠定位）；
- ? 进阶提示：如需在同一 Canvas 上叠加多个图形（而非多个 Canvas），应统一管理绘制顺序（后绘制的覆盖先绘制的），并善用 globalCompositeOperation 控制混合模式。
遵循以上原则，即可稳健实现多个图形并存、清晰可见的 Canvas 可视化效果。
