使用npm canvas包时ctx.fillText无法绘制文本该如何解决

常见原因及修复方式 #

• fillText参数缺失
  fillText方法必填参数为3个：文本内容、X轴坐标、Y轴坐标，你当前仅传入了文本参数，缺少绘制位置坐标，导致无法渲染。标准语法如下：

ctx.fillText(text, x, y[, maxWidth])

你需要补充坐标参数，比如在左上角区域绘制就写：

ctx.fillText(data.queryresult.pods[0].title, 10, 20)

• 未提前设置文本样式
  使用fillText前必须先配置文本相关属性，否则会因为无有效字体配置导致渲染失败，需要在调用fillText前添加类似如下配置：

// 格式：字号 字体
ctx.font = '20px "Microsoft YaHei", sans-serif'
// 配置文本颜色，避免和背景色一致
ctx.fillStyle = '#000000'

• 绘制顺序错误导致文本被图片覆盖
  你当前代码是先绘制文本，再从坐标(0,0)开始绘制图片，不透明的图片会直接覆盖下方的文本内容，调整绘制顺序，先画图片再画文本即可。

修正后的完整代码 #

if(data.queryresult.pods[0]){
  // 先加载并绘制图片
  var img = await loadImage(data.queryresult.pods[0].subpods[0].img.src)
  ctx.drawImage(img, 0, 0)
  // 配置文本样式
  ctx.font = '20px sans-serif'
  ctx.fillStyle = '#000'
  // 绘制文本，补充坐标参数
  ctx.fillText(data.queryresult.pods[0].title, 10, 25)
  let file = new MessageAttachment(canvas.toBuffer(), 'output.png')
  message.channel.send({
    files: [file]
  })
}

• 额外排查项
  如果调整后还是不显示，可以先打印data.queryresult.pods[0].title确认文本内容非空，同时检查canvas画布尺寸是否足够容纳文本。

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