有没有办法使用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适用于弧形文本。

http://circletype.labwire.ca/

有一个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>