web-dev-qa-db-ja.com

CSS3 / Canvasを使用してテキストを曲線/弧にする方法はありますか

CSS3、HTML Canvas、さらにはSVGを使用してcurved textエフェクトを作成しようとしています（下の画像を参照）。これは可能ですか？もしそうなら、どうすればこの効果を達成できますか？

更新：明確にするために：この方法でスタイル設定されるテキストは動的になります。

Arched or Curved Text Example

javascripthtmlcsscanvascss3
51
gabriel

SVGはパス上のテキストを直接サポートしますが、パスに沿って個々のグリフを「曲げる」ことはありません。 例 作成方法は次のとおりです。

...
<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

確かにcanvasでそれを行うことができます。例としてこのコードを試してください：

<!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>

それは正確にそれを行いませんが、あなたはあなたの好みに合わせてそれを微調整することができると確信しています;）

21
Jakub Hampl

または、CSSを使用してそれを行うこともできますが、IEすぐに実行されることはありません。一方で、テキストが選択可能であることは素晴らしいことです。 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

これは純粋なCSSソリューションではありませんが、CircleType.jsはアークテキストに最適です。

http://circletype.labwire.ca/

8
peterhry

arctext.js と呼ばれるCSS3を使用してテキストを湾曲させるjQueryプラグインがあります。それはかなり良いですし、構成オプションの範囲があります。 IE8では動作しないと思いますが、ほとんどのCSS3は動作しないと思います！

デモページもあり、そのいくつかの例が動作しています here 。

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

このjQueryプラグインを試すことができます http://codecanyon.net/item/jquery-text-Arch/3669779
テキストアーチとテキストサークルをカスタマイズするための多くのオプションがあります。
すべての主要なブラウザとOSで動作します

1
Aleksandar Timic

私はこれが1年以上遅れていることを理解していますが、ここに私の解決策があります

JS Fiddleスニペット

テキストをラップしますが、キャンバスの変換が本当に嫌いで、テキストを2回転させる方法を頭にラップできないので、文字を下に沿って垂直に反転する方法がわかりませんy軸、そして再び想像上の円の中心について）。

0
puk

http://apike.ca/prog_svg_text.html からChromeにサンプルを実行できましたが、IEでは動作しません。

SVGWebを使用できます http://code.google.com/p/svgweb/

または、サーバーサイト（.NET/PHP）でHttpハンドラーのような独自の画像生成ユーティリティを作成し、それにテキストを渡すと、グラフィックライブラリを使用して画像をその場でレンダリングすることでGIF/PNGを返します。

0
Vishal Seth

上記のチュートリアル（Simon Tewsiによる）を使用して、カーニングの問題に関するより良いソリューションを作成しました。ライブラリを使用せず、純粋なJS。

http://jsfiddle.net/fidnut/cjccg74f/ でご覧ください

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

注：SOは、JSFiddleからのすべてのコードをここに配置することを要求しています。これが賢明で多すぎるとは思わないので、関数の名前のみを追加しています。

0
Rookie Vee

この tutorial は、HTML5とキャンバスを使用してそれを行う方法を正確に示しています。上記の他の応答の1つは、canvas.rotateメソッドを使用するという同様の考えを持っていました。これもcanvas.translateを使用します。

0
Simon Tewsi

次のように、TextPathでSVGを使用できます。

<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