本文详解如何在 HTML Canvas 中准确绘制带背景色的文本或自定义图像作为地图标记，重点解决 fillText 不显示、坐标缺失、Canvas 未挂载等常见问题，并提供可运行的完整示例。
本文详解如何在 html canvas 中准确绘制带背景色的文本或自定义图像作为地图标记，重点解决 `filltext` 不显示、坐标缺失、canvas 未挂载等常见问题，并提供可运行的完整示例。
在使用 Canvas 渲染地图标记（如 POI 图标）时，开发者常遇到文本不显示、图像无法嵌入、样式错位等问题。核心原因通常有三：fillText() 缺少明确的 x/y 坐标参数、Canvas 元素未插入 DOM、绘图顺序与裁剪（clip()）逻辑干扰了后续绘制。
以下是一个修复后的完整实现，用于生成带白色底衬、蓝色主圆、居中白色文字的自定义标记：
<div id="content"></div>
const canvas = document.createElement("canvas");
const radius = 24;
canvas.width = radius * 2;
canvas.height = radius * 2;
const ctx = canvas.getContext("2d");
// 1. 绘制白色底衬（全画布）
ctx.fillStyle = "white";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 2. 绘制蓝色主圆（半径为 radius * 0.75，居中）
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);⚠️ 注意事项：
- fillText(text, x, y) 的 y 值是基线位置，不是文字底部；使用 textBaseline = "middle" + y = centerY 可精准垂直居中；
- 所有 clip() 调用会限制后续绘制区域，若未重置路径或清除裁剪区，可能导致文本被裁掉——本例已移除冗余 clip()，改用分层绘制更安全；
- 若需显示图像而非文字，可用 ctx.drawImage(image, dx, dy, dWidth, dHeight)，推荐预加载图片并确保跨域合规（如设置 image.crossOrigin = "anonymous"）；
- 动态生成多个标记时，建议封装为函数（如 createMarker(text, color)），避免重复代码。
通过以上结构化绘制流程，你可稳定产出风格统一、语义清晰的地图标记 Canvas 元素，为高阶交互（如点击响应、动画缩放）打下坚实基础。
