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

Question

我正在使用HTML5 canvas API来显示一些字符串(canvas.fillText),我想知道是否可以使用canvas api进行文本修饰(如下划线,删除线等).不幸的是我没有发现这一点.我找到的唯一解决方案是使用画布绘图api手动进行装饰(我的意思是,明确地绘制一条水平线,例如,模仿'下划线'装饰).是否可以使用canvas文本api？

谢谢Patrick

Answer 1

它不适用于内置方法,但这是一个简化的函数,我成功使用它基于读取它.http://scriptstock.wordpress.com/2012/06/12/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();

}

Answer 2

你可以通过使用measureText和fillRect像这样来做到这一点：

ctx.fillText(text, xPos, yPos);
let { width } = ctx.measureText("Hello World");
ctx.fillRect(xPos, yPos, width, 2);

这种方法唯一困难的部分是无法使用 measureText 获取高度。否则，您可以在绘制 fillRect 时将其用作 Y 坐标。

您的 Y 位置将仅取决于文本的高度以及您希望下划线的接近程度。

堆栈片段中的演示

// get canvas / context
var can = document.getElementById('my-canvas');
var ctx = can.getContext('2d')

let xPos=10, yPos=15;
let text = "Hello World"

ctx.fillText(text, xPos, yPos);
let { width } = ctx.measureText("Hello World");
ctx.fillRect(xPos, yPos, width, 2);

<canvas id="my-canvas" width="250" height="150"></canvas>

Answer 3

我很遗憾地说答案是否定的。HTML Canvas Context 的文本方法中没有可用的“文本装饰”或类似样式。