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

Question

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

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

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

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

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

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

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

Answer 3

Мне жаль говорить, что ответ 'нет '.В текстовых методах контекста HTML-холста .

нет текстовых элементов или похожих стилей