本文详解如何在 html canvas 中正确绘制带背景色的文字标签或图像图标，解决 filltext 不显示、坐标缺失、dom 未挂载等常见问题，并提供可直接运行的完整示例。
本文详解如何在 html canvas 中正确绘制带背景色的文字标签或图像图标，解决 filltext 不显示、坐标缺失、dom 未挂载等常见问题，并提供可直接运行的完整示例。
在使用 Canvas 动态生成地图标记（如自定义 Marker）时，常需在图形（例如蓝色圆点）上叠加文字名称或替换为图标图像。但初学者易遇到 fillText() 不渲染、文字位置错乱、甚至整个 canvas 不可见等问题——根本原因通常有三：缺少文本坐标参数、未将 canvas 插入 DOM、绘图逻辑顺序或裁剪干扰渲染。
以下是一个修复后的完整实现，以绘制带白色底衬与居中文字的蓝色圆形标记为例：
<div id="content"></div>
<script>
const canvas = document.createElement("canvas");
const radius = 24;
canvas.width = radius * 2;
canvas.height = canvas.width;
const ctx = canvas.getContext("2d");
// 1. 绘制白色底板（全画布）
ctx.fillStyle = "white";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 2. 绘制蓝色主圆（半径为 0.75 * radius，居中）
ctx.beginPath();
ctx.arc(radius, radius, radius * 0.75, 0, Math.PI * 2);
ctx.fillStyle = "blue";
ctx.fill();
// 3. 绘制居中文本（关键！必须指定 x 和 y 坐标）
ctx.font = "12px sans-serif";
ctx.fillStyle = "white";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("TEST", radius, radius); // ✅ x=radius, y=radius 实现真正居中
// 4. 将 canvas 添加到页面（否则不可见！）
document.getElementById("content").appendChild(canvas);
</script>
⚠️ 注意事项：
- fillText(text, x, y) 的 y 是基线位置，非文字底部；使用 textBaseline = "middle" + y = centerY 可精准垂直居中；
- 所有绘图操作必须在 canvas 被插入 DOM 之后或之前均可，但必须确保 canvas 元素已存在有效尺寸（本例中已显式设置 width/height）；
- 若需显示图像而非文字，可使用 ctx.drawImage(image, dx, dy, dWidth, dHeight)，推荐先通过 new Image() 加载并监听 onload 后再绘制，避免图像未加载完成导致空白；
- 避免滥用 clip()：原代码中多次调用 clip() 且未重置路径，极易导致后续绘制被意外裁剪；如非必要，优先用 fillRect + arc 分层绘制替代复杂裁剪。
进阶提示：若需批量生成不同文字的 Marker，建议封装为函数，接收 label、color、size 等参数，并返回 canvas 元素，便于与地图 SDK（如 Leaflet、Mapbox）集成。
