如何在同一页面中正确绘制多个 Canvas 图形而不相互遮挡-html教程-PHP中文网

本文讲解如何在 HTML 页面中使用多个元素独立绘制图形（如圆形与矩形），避免因坐标超出画布尺寸或渲染顺序导致的显示异常问题。

本文讲解如何在 html 页面中使用多个 `

在 Web 开发中，

以原始代码为例：

<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 画布内：

Canva可画（Windows版）

Windows版Canva可画，适用于Windows 10及以上版本。无需担心网络波动，无需顾虑浏览器兼容性，让你能够更加专注在设计上。

下载

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

⚠️ 注意事项：

渐变中心必须与图形位置匹配：原代码中 createRadialGradient(300, 300, ...) 仍使用旧坐标，会导致填充区域偏移，需同步更新；
CSS 样式影响布局：若需让两个 canvas 紧密并排或重叠，请用 CSS 控制（如 display: inline-block 或 position: absolute），而非依赖默认文档流堆叠；
单 canvas 多图形更高效：若图形逻辑相关（如符号由圆+矩组成），推荐共用一个

总结：Canvas 之间不会自动“隐藏”彼此——它们是独立画布。排查图形不可见问题，应优先检查：