est-il possible de tirer la décoration de texte (souligner, etc.) avec HTML5 Canvas Texte de l'API?

Je suis en utilisant le HTML5 canvas API pour afficher une chaîne de caractères (toile.fillText), et je me demandais si la décoration de texte (comme souligné, barré, etc.) était quelque chose de possible avec la toile de l'api. Malheureusement, je n'ai rien trouvé à ce sujet. La seule solution que j'ai trouvé était de faire manuellement la décoration à l'aide de la toile de l'api de dessin (je veux dire, explicitement, le dessin d'une ligne horizontale par exemple, pour imiter la underline la décoration).
Est-ce quelque chose de possible à l'aide de la toile de texte de l'api ?

Merci
Patrick

OriginalL'auteur Patrick Ruzand | 2011-01-07

  1. 8

    Il ne fonctionnera pas avec une méthode intégrée, mais ici, c'est une forme simplifiée de la fonction que j'ai utilisé avec succès basé sur la lecture de ce. 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();

}

    OriginalL'auteur Mulhoon

  2. 2

    Patrick, vous pouvez le faire facilement en utilisant fillRect comme suit:

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

    La seule partie difficile à propos de cette approche est qu'il n'ya aucun moyen d'obtenir la hauteur d'utilisation à savoir measuretext. Sinon, vous pouvez l'utiliser comme votre Y de coordonnées lors de l'élaboration de votre fillRect.

    Votre position sur l'axe Y ne dépendent de la hauteur de votre texte et que vous souhaitez le souligner.

    OriginalL'auteur Garebear

  3. 1

    Je suis désolé de dire que la réponse est " pas de'. Il n'y a pas 'text-decoration' ou similaire styles disponibles dans le texte de méthodes de Canevas HTML Contexte.

    Patrick, vous pouvez toujours utiliser une normale div avec du texte à l'intérieur et le mettre sur votre toile, pas vraiment répondre à votre question, mais c'est facile à faire et facile à gérer.
    Excellent point. Non seulement pouvez-vous obtenir le texte des décorations, mais vous pouvez également obtenir sous-pixel de l'anticrénelage, à la différence du texte sur le canevas.
    Mais en supposant que mon texte a une transformation de rotation, cela impliquerait d'utiliser CSS3 transforme, et j'ai coller avec de la toile de l'api en ce moment.

    OriginalL'auteur Phrogz