如何在 HTML Canvas 中同时绘制多个图形而不相互遮挡-html教程-PHP中文网

如何在 HTML Canvas 中同时绘制多个图形而不相互遮挡

本文讲解如何在多个独立 canvas 元素上正确绘制图形（如圆形与矩形），避免因坐标超出画布尺寸导致图形不可见的问题，并提供可运行的修复方案与最佳实践。

本文讲解如何在多个独立 canvas 元素上正确绘制图形（如圆形与矩形），避免因坐标超出画布尺寸导致图形不可见的问题，并提供可运行的修复方案与最佳实践。

在使用 HTML

✅ 正确做法是：确保所有绘图坐标的 x、y 值均在对应 。

以下是修复后的完整、可直接运行的代码示例：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载



  <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Canvas Symbol: Circle & Rectangle</title><style>
    canvas { display: block; margin: 10px 0; }
  </style><canvas id="canvas1" width="800" height="250"></canvas><canvas id="canvas2" width="800" height="300"></canvas><script>
    // ✅ 绘制圆形（修正坐标：x=100, y=100，在 canvas1 可视范围内）
    const circle = document.getElementById('canvas1');
    const ctx = circle.getContext('2d');
    ctx.beginPath();
    ctx.arc(100, 100, 50, 0, 2 * Math.PI); // 圆心(100,100)，半径50 → 完全可见
    ctx.strokeStyle = '#333';
    ctx.lineWidth = 2;
    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();

    // ✅ 绘制矩形（保持原逻辑，但优化样式与坐标合理性）
    const rect = document.getElementById('canvas2');
    const ctx2 = rect.getContext('2d');
    ctx2.beginPath();
    ctx2.rect(200, 50, 200, 40); // y=50 更安全（避开顶部边缘）
    ctx2.strokeStyle = '#555';
    ctx2.lineWidth = 1.5;
    ctx2.stroke();

    // 线性渐变填充（起点/终点坐标建议相对 canvas 尺寸设置，避免溢出）
    const grd2 = ctx2.createLinearGradient(200, 50, 400, 90);
    grd2.addColorStop(0, "#333");
    grd2.addColorStop(1, "#eee");
    ctx2.fillStyle = grd2;
    ctx2.fill();
  </script>

? 关键注意事项：

? 不要混淆「多个 Canvas 元素」与「同一 Canvas 上的图层叠加」：您当前使用的是两个独立
⚠️ 渐变对象（如 createRadialGradient）的坐标也需落在目标画布内，否则渐变效果可能异常或不可见。
✅ 推荐在绘图前添加边界校验（尤其动态计算坐标时）：
```
const x = 100, y = 100, r = 50;
if (x - r >= 0 && x + r = 0 && y + r 
```
? 进阶提示：若需真正实现「同一画布上的多图层叠加」（如矩形在下、圆形在上），只需在单个，无需多个 canvas。

通过合理约束坐标范围与理解 Canvas 坐标系，即可稳定、清晰地组合绘制任意复杂符号。