html - 是否可以使用 HTML5 Canvas Text API 绘制文本装饰(下划线等)？

Question

我正在使用 HTML5 Canvas API 来显示一些字符串 (canvas.fillText)，我想知道 Canvas 是否可以进行文本装饰(如下划线、删除线等)应用程序接口(interface)。不幸的是，我对此一无所获。

我找到的唯一解决方案是使用 Canvas 绘图 API 手动进行装饰(我的意思是，明确绘制一条水平线，例如，模仿“下划线”装饰)。

这可以使用 Canvas 文本 API 吗？

Answer 1

它不适用于内置方法，但这是我根据阅读 ScriptStock 网站上的“HTML5 Canvas: Text underline workaround”成功使用的简化函数。

var underline = function(ctx, text, x, y, size, color, thickness ,offset){
  var width = ctx.measureText(text).width;

  switch(ctx.textAlign){
    case "center":
    x -= (width/2); break;
    case "right":
    x -= width; break;
  }

  y += size+offset;
  
  ctx.beginPath();
  ctx.strokeStyle = color;
  ctx.lineWidth = thickness;
  ctx.moveTo(x,y);
  ctx.lineTo(x+width,y);
  ctx.stroke();

}