Можно ли рисовать текст (подчеркивание и т.д.) с помощью HTML5 Canvas Text API?

Я использую API-интерфейс canvas HTML5 для отображения некоторой строки (canvas.fillText), и мне было интересно, возможно ли украшение текста (например, подчеркивание, зачеркивание и т.д.) с помощью холста api. К сожалению, я ничего не нашел об этом. Единственное решение, которое я нашел, - это вручную сделать украшение, используя рисование холста api (я имею в виду, явно рисуя горизонтальную линию, например, чтобы имитировать украшение "underline" ). Возможно ли это, используя текст холста api?

Спасибо Патрик

Ответы

Ответ 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();

}

Ответ 3

Патрик, вы можете сделать это легко, используя fillRect следующим образом:

ctx.fillText("Hello World", 0, 0);
var text = ctx.measureText("Hello World");
ctx.fillRect(xPos, yPos, text.width, 2);

Единственная трудная часть этого подхода заключается в том, что нет способа получить измерение использования высоты. В противном случае вы можете использовать это как свою координату Y при рисовании fillRect.

Ваша позиция Y будет зависеть только от высоты вашего текста и от того, насколько близко вы хотите подчеркнуть.