Canvas地图标记添加文本/图片问题：fillText不显示如何解决？

文本不显示的核心问题 #

• fillText("TEST")未指定绘制坐标，默认从(0,0)开始，但该位置不在蓝色圆形的裁剪可视范围内
• 多次叠加clip()限制了绘制区域，最后一次无路径的clip()属于无效操作，还会干扰后续绘制
• 未设置字体样式，默认字体可能极小导致不可见

修复文本显示的代码示例 #

调整绘制顺序，移除多余裁剪操作，给文本指定居中坐标并设置字体：

const canvas = document.createElement("canvas")
const radius = 24
canvas.width = radius * 2
canvas.height = canvas.width
const context = canvas.getContext("2d")

// 绘制外层白色标记形状
context.beginPath()
context.arc(radius, radius, radius, -Math.PI, Math.PI / 2)
context.lineTo(0, radius * 2)
context.closePath()
context.fillStyle = "white"
context.fill()

// 绘制蓝色圆形背景
context.beginPath()
context.arc(radius, radius, radius * 0.75, 0, Math.PI * 2)
context.fillStyle = "blue"
context.fill()

// 绘制居中白色文本
context.fillStyle = "white"
context.font = "16px Arial" // 必须设置字体，否则默认尺寸极小
context.textAlign = "center"
context.textBaseline = "middle"
context.fillText("TEST", radius, radius) // 以圆心为坐标实现居中

用图片替代蓝色圆形标记的方案 #

如果要替换蓝色圆形为自定义图片，需处理图片异步加载逻辑：

const canvas = document.createElement("canvas")
const radius = 24
canvas.width = radius * 2
canvas.height = canvas.width
const context = canvas.getContext("2d")

// 绘制外层白色标记形状
context.beginPath()
context.arc(radius, radius, radius, -Math.PI, Math.PI / 2)
context.lineTo(0, radius * 2)
context.closePath()
context.fillStyle = "white"
context.fill()

// 加载并绘制自定义标记图片
const markerImg = new Image()
markerImg.src = "你的图片路径" // 替换为实际图片URL
markerImg.onload = function() {
  // 适配原蓝色圆形的尺寸
  const imgSize = radius * 1.5
  context.drawImage(markerImg, radius - imgSize/2, radius - imgSize/2, imgSize, imgSize)
  
  // 可选：在图片上叠加文本
  context.fillStyle = "white"
  context.font = "16px Arial"
  context.textAlign = "center"
  context.textBaseline = "middle"
  context.fillText("TEST", radius, radius)
}

关键注意事项 #

• 使用fillText必须明确指定x、y坐标，结合textAlign和textBaseline可快速实现居中效果
• 非必要不要滥用clip()，如需临时裁剪，建议用context.save()和context.restore()管理上下文状态
• 图片绘制必须等待onload事件触发，否则图片未加载完成不会显示

内容的提问来源于stack exchange，提问作者Enickkey