本文详解 canvas 绘图时因坐标超出画布边界或层级混淆导致图形“消失”的常见问题，通过调整坐标、统一画布管理及理解渲染顺序，实现圆与矩形等多元素共存且清晰可见。
本文详解 canvas 绘图时因坐标超出画布边界或层级混淆导致图形“消失”的常见问题，通过调整坐标、统一画布管理及理解渲染顺序，实现圆与矩形等多元素共存且清晰可见。
在 Web 开发中，使用 <canvas></canvas> 绘制图形时，一个典型误区是误以为多个 <canvas></canvas> 元素天然“层叠”或可自由混排——实际上，每个 <canvas></canvas> 是独立的绘图上下文，彼此不共享坐标系，也不自动叠加显示；而更常见的隐藏原因，是绘图坐标超出了画布自身的宽高范围，导致图形被裁剪（不可见），而非被“覆盖”。
以您提供的代码为例：
-
canvas1的尺寸为width="800" height="250"； - 但圆的绘制坐标为
ctx.arc(300, 300, 50, ...)，其中 y 坐标300已超过画布高度250，因此整个圆形完全位于画布可视区域之外，表现为“消失”。
✅ 正确做法是：确保所有绘图坐标的 x 和 y 值均落在 [0, canvas.width) 和 [0, canvas.height) 范围内。例如将圆心改为 (100, 100)，即可完整显示：
var circle = document.getElementById('canvas1');
var ctx = circle.getContext('2d');
// ✅ 修正：y=100 < canvas1.height (250)，确保可见
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.stroke();
// 径向渐变填充（注意：渐变中心也需在画布内才有效）
var grd = ctx.createRadialGradient(100, 100, 0, 100, 100, 50);
grd.addColorStop(0, '#fff');
grd.addColorStop(1, 'black');
ctx.fillStyle = grd;
ctx.fill();同时，canvas2 中的矩形 rect(200, 10, 200, 40) 坐标 (200,10) 完全合法（y=10
⚠️ 进阶建议：
-
避免多 Canvas 拆分绘图：若圆与矩形本属同一符号（如图标组合），推荐仅用一个
<canvas></canvas>，按需先后绘制，利用drawImage()或分层save()/restore()管理状态，逻辑更清晰、性能更优； -
检查渐变定义位置：原代码中
createRadialGradient(300, 300, ...)使用了超出画布的坐标，虽不报错，但可能导致渐变不可见或渲染异常，应与图形坐标对齐； -
启用调试辅助：临时添加
ctx.strokeStyle = 'red'; ctx.lineWidth = 1; ctx.strokeRect(0, 0, canvas.width, canvas.height);可快速定位画布边界。
总结：Canvas 图形“隐藏”极少由“Z 轴覆盖”引起（除非 CSS z-index 干预），绝大多数源于坐标越界、未调用 beginPath() 导致路径累积、或忘记 fill()/stroke()。养成校验坐标、善用单 Canvas 分层绘制的习惯，即可高效构建复杂矢量符号。
