web-dev-qa-db-fra.com

Est-il possible de courber/courber le texte en utilisant CSS3/Canvas

J'essaie de créer un effet texte incurvé à l'aide de CSS3, HTML Canvas ou même de SVG (voir l'image ci-dessous par exemple)? Est-ce possible? Si oui, comment puis-je obtenir cet effet?

Update: Pour clarifier: le texte qui sera stylé de cette façon sera dynamique.

Arched or Curved Text Example

51
gabriel

SVG prend en charge le texte sur un chemin directement, bien qu'il ne "plie" pas les glyphes individuels le long du chemin. Voici un exemple de la façon dont vous le créez:

...
<defs>
  <path id="textPath" d="M10 50 C10 0 90 0 90 50"/>
</defs>
<text fill="red">
  <textPath xlink:href="#textPath">Text on a Path</textPath>
</text>
...
33
Phrogz

Vous pouvez certainement le faire avec canvas, essayez ce code comme exemple:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Testing min-width and max-width</title>
    <style type="text/css">

    </style>

  </head>
  <body>
      <canvas id="cnv"></canvas>
      <script type="text/javascript" charset="utf-8">
          cnv = document.getElementById("cnv");
          cnv.width = 500;
          cnv.height = 300;
          ctx = cnv.getContext("2d");
          ctx.font = "bold 12px sans-serif";
          text = "abcdefghijklm"
          for (i = 0; i < text.length; i++) {
              ctx.fillText(text[i], 300, 100);
              ctx.rotate(0.1);
          }
      </script>
  </body>
</html>

Il ne le fait pas exactement bien, mais je suis certain que vous réussirez à le modifier à votre goût;)

21
Jakub Hampl

Ou vous pouvez le faire en utilisant des CSS, mais je suis sûr que vous ne pourrez pas le lancer IE de si tôt. La chose intéressante, par contre, est que le texte est sélectionnable: D

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Testing min-width and max-width</title>
    <style type="text/css">
        .num1 {
            -webkit-transform: translate(0px, 30px) rotate(-35deg); 
        }
        .num2 {
            -webkit-transform: translate(0px, 25px) rotate(-25deg); 
        }
        .num3 {
            -webkit-transform: translate(0px, 23px) rotate(0deg); 
        }
        .num4 {
            -webkit-transform: translate(0px, 25px) rotate(25deg); 
        }
        .num5 {
            -webkit-transform: translate(0px, 30px) rotate(35deg); 
        }

       span {display: inline-block; margin: 1px;}
    </style>

  </head>
  <body>
    <div style="width: 300px; height: 300px; margin: 50px auto">
      <span class="num1">a</span><span class="num2">b</span><span class="num3">c</span><span class="num4">d</span><span class="num5">e</span>
    </div>
</body>
</html>
13
Jakub Hampl

Ce n'est pas une solution CSS pure mais CircleType.js fonctionne très bien pour le texte arqué.

http://circletype.labwire.ca/

8
peterhry

Il y a un plugin jQuery pour courber le texte en utilisant CSS3 appelé arctext.js . C'est assez bon et a une gamme d'options de configuration. Je suppose que cela ne fonctionnera pas sur IE8 mais je suppose que la plupart des CSS3 ne fonctionnent pas!

Il y a aussi une page de démonstration avec quelques exemples en action ici

3
Mark Rhodes
<embed width="100" height="100" type="image/svg+xml" src="path.svg">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <path id="textPath" d="M10 50 C10 0 90 0 90 50"/>
    </defs>
  </svg>
</embed>
2
signano Anas

Vous pouvez essayer ce plugin jQuery http://codecanyon.net/item/jquery-text-Arch/3669779
Il a beaucoup d'options pour personnaliser les arches de texte et les cercles de texte.
Fonctionne dans tous les principaux navigateurs et systèmes d'exploitation

1
Aleksandar Timic

Je me rends compte que c'est plus d'un an de retard, mais voici ma solution

JS Fiddle extrait

cela enveloppe le texte mais je ne sais pas comment retourner les lettres verticalement en bas parce que je déteste vraiment les transformations de la toile et que je ne peux pas comprendre comment faire deux rotations sur du texte axe des ordonnées et encore une fois autour du centre d’un cercle imaginaire).

0
puk

J'ai pu exécuter des exemples depuis http://apike.ca/prog_svg_text.html dans Chrome, mais cela ne fonctionne pas dans IE.

Vous pouvez utiliser SVGWeb, http://code.google.com/p/svgweb/

Alternativement, vous pouvez écrire votre propre utilitaire de génération d'image sur le site du serveur (en .NET/PHP) comme un gestionnaire Http et lui transmettre du texte. Ce dernier renverrait GIF/PNG en utilisant la bibliothèque graphique et en affichant l'image à la volée pour vous.

0
Vishal Seth

J'ai utilisé le tutoriel mentionné ci-dessus (par Simon Tewsi) pour écrire une meilleure solution concernant le problème du crénage. N'utilise pas de bibliothèque, pure JS.

Voir à http://jsfiddle.net/fidnut/cjccg74f/

function drawTextAlongArcInside(ctx, str, font, color, radius, angle, centerX, centerY, wspace)

Remarque: SO exige que je mette tout le code de JSFiddle ici aussi. Je ne pense pas que ce soit sage, trop de code, alors j'ajoute seulement le nom de la fonction.

0
Rookie Vee

Ce tutorial vous montre exactement comment le faire en utilisant HTML5 et canvas. Une des autres réponses, ci-dessus, avait une idée similaire, d'utiliser la méthode canvas.rotate. Celui-ci utilise également canvas.translate.

0
Simon Tewsi

Vous pouvez utiliser SVG avec TextPath comme ceci:

<html>
<head>
<script>
 function updateMessage(str) {
document.getElementById("MyMessage").textContent = str;
 }
</script>
</head>
<body >
<button onClick="updateMessage('The text has changed');">Change the text</button>
  <svg viewBox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <path id="CurvedPath"
          d="M 0 150 Q 325 50 650 150 " />
  </defs>
<text font-size="54" x='325' y='50'  text-anchor="middle"  fill="darkgreen" font-family=Arial,Helvetica  style="text-shadow: 2px 2px 3px gray;"
>       <textPath id='MyMessage' xlink:href="#CurvedPath" >
THIS TEXT IS CURVED
    </textPath>
  </text>
</svg>
</body>

</html>

0
Vereb