本文讲解如何在 HTML 页面中使用多个 <canvas> 元素独立绘制图形（如圆形与矩形），避免因坐标超出画布尺寸或渲染顺序导致的显示异常问题。
本文讲解如何在 html 页面中使用多个 `
在 Web 开发中，<canvas> 是一个基于像素的绘图 API，每个 <canvas> 元素都拥有独立的 2D 渲染上下文（CanvasRenderingContext2D）。常见误区是认为“多个 canvas 会互相覆盖”，实际上它们默认是层叠排列的块级元素，彼此独立；真正导致图形“消失”的原因通常是：绘图坐标超出了当前 canvas 的宽高范围，或未正确设置样式（如 display、position）引发视觉遮挡。
以原始代码为例：
<canvas id="canvas1" width="800" height="250"></canvas> <canvas id="canvas2" width="800" height="300"></canvas>
第一个 canvas 高度为 250px，但圆心坐标设为 (300, 300) —— 纵坐标 y = 300 已远超 height = 250，导致整个圆形被裁剪，视觉上“消失”。这不是 canvas 之间相互隐藏，而是图形绘制在画布可视区域之外。
✅ 正确做法是：确保所有绘图操作的坐标均落在对应 canvas 的 [0, width] × [0, height] 范围内。
例如，将圆心调整至 (100, 100)，半径 50，则其边界为 x∈[50,150], y∈[50,150]，完全位于 800×250 画布内：
const circle = document.getElementById('canvas1');
const ctx = circle.getContext('2d');
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI); // ✅ 安全坐标
ctx.stroke();
// 径向渐变中心需同步调整（否则渐变效果错位）
const grd = ctx.createRadialGradient(100, 100, 0, 100, 100, 50);
grd.addColorStop(0, '#fff');
grd.addColorStop(1, '#000');
ctx.fillStyle = grd;
ctx.fill();同理，第二个 canvas 中的矩形 rect(200, 10, 200, 40) 坐标 (200,10) 完全合法（y=10 < height=300），无需修改。
⚠️ 注意事项：
- 渐变中心必须与图形位置匹配：原代码中 createRadialGradient(300, 300, ...) 仍使用旧坐标，会导致填充区域偏移，需同步更新；
- CSS 样式影响布局：若需让两个 canvas 紧密并排或重叠，请用 CSS 控制（如 display: inline-block 或 position: absolute），而非依赖默认文档流堆叠；
- 单 canvas 多图形更高效：若图形逻辑相关（如符号由圆+矩组成），推荐共用一个 <canvas> 并按需调用 beginPath() 分离路径，避免 DOM 节点冗余。
总结：Canvas 之间不会自动“隐藏”彼此——它们是独立画布。排查图形不可见问题，应优先检查：
- 绘图坐标是否在画布尺寸范围内；
- 是否遗漏 fill() / stroke() 调用；
- 渐变/阴影等效果的参数是否与图形位置一致；
- CSS 是否意外设置了 visibility: hidden 或 opacity: 0。
通过精准控制坐标与上下文，即可稳定、清晰地呈现多个图形元素。
