有没有办法使用 CSS3/Canvas 来弯曲/弧形文本

Question

我正在尝试使用 CSS3、HTML Canvas 甚至 SVG 制作弯曲的文本效果（例如，请参见下图）？ 这可能吗？ 如果是这样，我怎样才能达到这种效果？

更新：澄清：以这种方式设置样式的文本将是动态的。

Answer 1

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

Answer 2

你当然可以用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>

它并没有完全正确，但我确信你会设法将它调整为你的比较;）

Answer 3

或者你可以使用一些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>

Answer 4

它不是纯CSS解决方案，但CircleType.js适用于弧形文本。

http://circletype.labwire.ca/

Answer 5

有一个jQuery插件使用CSS3曲线文本称为arctext.js 。 它非常好，有一系列配置选项。 我想它在IE8上不起作用，但我猜大多数CSS3的东西都不行！

还有，在行动的它的一些例子演示页这里 。

Answer 6

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

Answer 7

你可以尝试这个jQuery插件http://codecanyon.net/item/jquery-text-arch/3669779
它有很多选项可用于自定义文本拱门和文本圈。
适用于所有主流浏览器和操作系统

Answer 8

本教程将向您展示如何使用HTML5和canvas进行操作。 上面的其他回复之一有类似的想法，使用canvas.rotate方法。 这个也使用canvas.translate。

Answer 9

我使用上面提到的教程（由Simon Tewsi编写）来编写一个关于字距调整问题的更好的解决方案。 不使用库，纯JS。

请访问http://jsfiddle.net/fidnut/cjccg74f/

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

注意：SO要求我把JSFiddle的所有代码放在这里。 我不认为这是明智的，代码太多，所以我只添加函数的名称。

Answer 10

我能够将http://apike.ca/prog_svg_text.html中的示例运行到Chrome中，但它在IE中不起作用。

您可以使用SVGWeb， http：//code.google.com/p/svgweb/

或者，您可以在服务器站点（在.NET / PHP中）编写自己的图像生成实用程序（如Http Handler）并将文本传递给它，它将通过使用图形库和动态渲染图像返回GIF / PNG。

Answer 11

您可以将SVG与TextPath一起使用，如下所示：

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

Answer 12

我意识到这已经晚了一年多，但这是我的解决方案

JS Fiddle片段

它包裹了文本，但我无法弄清楚如何沿着底部垂直翻转字母，因为我真的非常讨厌画布转换而我无法绕过如何对文本进行两次旋转（翻转一次y轴和再次围绕假想圆的中心）。

Answer 13

还有transform: skew(x, y, z) ，它不使用画布。