有没有办法使用CSS3 / Canvas曲线/弧形文字
我正在尝试使用CSS3，HTMLcanvas，甚至是SVG来制作曲线文字效果（请参阅下面的示例）？ 这可能吗？ 如果是这样，我怎么能达到这个效果呢？
更新：澄清：这种方式将文本将是dynamic的。
SVG直接支持text-on-a-path，尽pipe它不会沿着path“弯曲”单个字形。 以下是您如何创build它的示例 ：
... <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> ... 你当然可以用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>
这并不是完全正确，但我确定你会设法调整它到你的比喻;）
或者你可以使用一些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>
这不是一个纯粹的CSS解决scheme，但CircleType.js适用于弧形文本。
有一个jQuery插件使用称为arctext.js的 CSS3曲线文本。 这是相当不错的，并有一系列的configuration选项。 我想这不会在IE8上工作，但我想大多数CSS3的事情不！
这里还有一个演示页面，其中有一些示例。
<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>
你可以试试这个jQuery插件http://codecanyon.net/item/jquery-text-arch/3669779
它有很多选项来自定义文字拱门和文字圈。
适用于所有主stream浏览器和操作系统
我能够将http://apike.ca/prog_svg_text.html中的示例运行到Chrome中，但在IE中不起作用。;
您可以使用SVGWeb， http://code.google.com/p/svgweb/
另外，你也可以在服务器站点（在.NET / PHP中）像Http Handler一样编写自己的图像生成实用程序，并将文本传递给它，它将通过使用graphics库和渲染图像为您返回GIF / PNG。
我意识到这是晚了一年，但这是我的解决scheme
JS小提琴片段
它包裹的文字，但我不知道如何翻转字母垂直沿着底部，因为我真的真的很讨厌canvas转换，我不能包裹我的头周围如何做两个旋转的文字（翻转一次y轴再次围绕虚圆的中心）。
本教程将向您展示如何使用HTML5和canvas进行操作。 上面的其他答案之一，有一个类似的想法，使用canvas.rotate方法。 这一个也使用canvas.translate。
我使用上面提到的教程（Simon Tewsi）来写一个关于字距问题的更好的解决scheme。 使用没有库，纯JS。
在http://jsfiddle.net/fidnut/cjccg74f/上查看;
function drawTextAlongArcInside(ctx, str, font, color, radius, angle, centerX, centerY, wspace)
注意：SO要求我把JSFiddle的所有代码放在这里。 我不认为这是明智的，太多的代码，所以我只添加了函数的名称。
你可以像这样使用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>
