本文讲解如何避免因坐标超出画布尺寸或误用多画布布局导致的图形不可见问题，通过修正坐标、统一绘图逻辑和合理使用 css 层叠，实现在同一页面中清晰显示圆形与矩形符号。
本文讲解如何避免因坐标超出画布尺寸或误用多画布布局导致的图形不可见问题，通过修正坐标、统一绘图逻辑和合理使用 css 层叠，实现在同一页面中清晰显示圆形与矩形符号。
在 JavaScript 中使用 <canvas></canvas> 绘制图形时，一个常见误区是认为“创建两个 canvas 元素就能自然并存显示”，而忽略了坐标系统独立性与DOM 布局层级的影响。你当前代码中，canvas1 高度为 250px，却在 (300, 300) 位置绘制半径为 50 的圆——这意味着圆心已远超画布右下角（x=300 > width=800？看似可容，但 y=300 > height=250 ✅ 已溢出），导致圆形完全不可见。
更关键的是：你使用了两个独立 canvas 元素（#canvas1 和 #canvas2），它们在 DOM 中是并列块级元素，默认垂直堆叠。虽然视觉上“矩形在下、圆形在上”，但实际并非 Z 轴重叠关系，而是上下分离的两个画布区域。因此不存在“矩形遮挡圆形”的情况——真正的问题是：圆形压根没画进可视区域。
✅ 正确解法分三步：
1. 修正坐标，确保图形落在画布内
将圆心从 (300, 300) 改为 (100, 100)（适配 height="250"）：
ctx.beginPath(); ctx.arc(100, 100, 50, 0, 2 * Math.PI); // ✅ 圆心位于画布安全区内 ctx.stroke(); ctx.fillStyle = 'black'; ctx.fill();
2. 优化渐变定义（避免坐标错位）
原代码中 createRadialGradient(300, 300, 50, ...) 使用了与圆心不一致的坐标，应同步调整为 (100, 100)：
var grd = ctx.createRadialGradient(100, 100, 0, 100, 100, 50); grd.addColorStop(0, '#fff'); grd.addColorStop(1, 'black'); ctx.fillStyle = grd; ctx.fill();
3. 推荐进阶方案：单 canvas 多图形（更可控、更高效）
与其维护两个 canvas，不如统一到一个画布中绘制，并利用 z-index 或绘制顺序控制层级（Canvas 中后绘制的图形自动覆盖先绘制的）：
<canvas id="symbolCanvas" width="800" height="300"></canvas>
const canvas = document.getElementById('symbolCanvas');
const ctx = canvas.getContext('2d');
// 先画矩形（底层）
ctx.beginPath();
ctx.rect(200, 10, 200, 40);
ctx.strokeStyle = '#333';
ctx.lineWidth = 2;
ctx.stroke();
const gradRect = ctx.createLinearGradient(200, 10, 400, 50);
gradRect.addColorStop(0, 'black');
gradRect.addColorStop(1, 'white');
ctx.fillStyle = gradRect;
ctx.fill();
// 再画圆形（顶层，自动覆盖矩形部分区域）
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.strokeStyle = '#000';
ctx.lineWidth = 3;
ctx.stroke();
const gradCircle = ctx.createRadialGradient(100, 100, 0, 100, 100, 50);
gradCircle.addColorStop(0, '#fff');
gradCircle.addColorStop(1, '#000');
ctx.fillStyle = gradCircle;
ctx.fill();⚠️ 注意事项：
- Canvas 坐标原点
(0, 0)在左上角，Y 轴向下增长；务必校验y + radius ≤ canvas.height； - 多 canvas 布局需额外处理 CSS 定位（如
position: absolute+z-index），否则只是物理分离，非视觉叠加； - 单 canvas 方案内存占用更低、渲染性能更优，且天然支持图层顺序控制（绘制先后即显示层级）；
- 若必须使用多 canvas 叠加，请用 CSS 包裹容器并设置
position: relative，子 canvas 设position: absolute; top: 0; left: 0并指定z-index。
总结：图形“消失” rarely 是因为被遮挡，更多源于坐标越界或画布尺寸不匹配。始终以画布尺寸为边界验证坐标，并优先采用单 canvas 多图形策略，可大幅提升开发效率与可维护性。
