¿es posible dibujar una decoración de texto (subrayado, etc.) con HTML5 Canvas Text API?

Question

Estoy usando la API de canvas de HTML5 para mostrar una cadena (canvas.fillText), y me preguntaba si la decoración de texto (como subrayado, tachado, etc.) era algo posible con la aplicación canvas. Desafortunadamente no encontré nada sobre esto. La única solución que encontré fue hacer la decoración manualmente usando la api del dibujo del lienzo (es decir, dibujar explícitamente una línea horizontal, por ejemplo, para imitar la decoración 'subrayado'). ¿Es posible algo con la aplicación de texto del lienzo?

Gracias Patrick

Answer 1

me siento decir que la respuesta es 'no'. No hay 'text-decoration' o estilos similares disponibles en el text methods of the HTML Canvas Context.

Answer 2

No funcionará con un método incorporado, pero aquí hay una función simplificada que utilicé con éxito en base a la lectura de esto. 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 3

Patrick, usted puede hacer esto fácilmente mediante el uso fillRect así:

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

La única parte difícil de este enfoque es que no hay manera de obtener el uso measureText altura. De lo contrario, podría usar eso como su coordenada Y al dibujar su fillRect.

Su posición Y solo dependerá de la altura de su texto y de lo cerca que desee el subrayado.