Javascript 有没有办法使用 CSS3/Canvas 来弯曲/弧形文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2840862/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a way to curve / arc text using CSS3 / Canvas
提问by gabriel
I'm trying to make a curved texteffect using CSS3, HTML Canvas, or even SVG (see image below for example)? Is this possible? If so, how can I achieve this effect?
我正在尝试使用 CSS3、HTML Canvas 甚至 SVG制作弯曲的文本效果（例如，请参见下图）？这可能吗？如果是这样，我怎样才能达到这种效果？
Update:To clarify: The text that will be styled this way will be dynamic.
更新：澄清：以这种方式设置样式的文本将是动态的。
回答by Phrogz
SVG supports text-on-a-path directly, though it does not 'bend' the individual glyphs along the path. Here's an exampleof how you create it:
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>
...
回答by Jakub Hampl
You can certainly do it with canvas, try out this code as an example:
你当然可以用画布来做，以下面的代码为例：
<!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>
It doesn't do it exactly right, but I'm certain you'll manage to tweak it to your likening ;)
它做得并不完全正确，但我确信您会设法将其调整为您的喜好；)
回答by Jakub Hampl
Or you can do it using some CSS, however I'm sure you won't get it running on IE any time soon. On the other hand the cool thing is that the text is selectable :D
或者您可以使用一些 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>
回答by peterhry
It's not a pure CSS solution but CircleType.js works great for arced text.
它不是纯 CSS 解决方案，但 CircleType.js 非常适合弧形文本。
回答by Mark Rhodes
There is a jQuery Plugin to curve text using CSS3 called arctext.js. It's pretty good and has a range of configuration options. I guess it won't work on IE8 but I guess most CSS3 thing don't!
有一个名为arctext.js的 jQuery 插件可以使用 CSS3 弯曲文本。它非常好并且有一系列的配置选项。我想它不会在 IE8 上工作，但我想大多数 CSS3 的东西都不会！
There's also a demo page with some example of it in action here.
还有，在行动的它的一些例子演示页这里。
回答by signano Anas
<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>
回答by Aleksandar Timic
You can try this jQuery plugin http://codecanyon.net/item/jquery-text-arch/3669779
It has a lot of options for customizing text arches and text circles.
Works in all major browsers and OS's
你可以试试这个 jQuery 插件http://codecanyon.net/item/jquery-text-arch/3669779
它有很多自定义文本拱和文本圈的选项。
适用于所有主要浏览器和操作系统
回答by Simon Tewsi
回答by Vishal Seth
I was able to run examples from http://apike.ca/prog_svg_text.htmlinto Chrome but it does not work in IE.
我能够将http://apike.ca/prog_svg_text.html 中的示例运行 到 Chrome 中，但它在 IE 中不起作用。
You can use SVGWeb, http://code.google.com/p/svgweb/
您可以使用 SVGWeb，http://code.google.com/p/svgweb/
Alternatively, you can write your own image generating utility at server site (in .NET/PHP) like an Http Handler and pass text to it and it would return GIF/PNG by using the graphics library and rendering image on the fly for you.
或者，您可以在服务器站点（在 .NET/PHP 中）编写自己的图像生成实用程序，如 Http 处理程序并将文本传递给它，它会通过使用图形库和动态渲染图像来返回 GIF/PNG。
回答by puk
I realize this is over a year late, but here is my solution
我意识到这已经晚了一年多，但这是我的解决方案
it wraps the text around but I can't figure out how to flip the letters vertically along the bottom because I really really really hate the canvas transformations and I can't wrap my head around how to do two rotations on text (flip once along the y axis and once again about the center of an imaginary circle).
它环绕文本，但我无法弄清楚如何沿底部垂直翻转字母，因为我真的非常讨厌画布转换，而且我无法将头环绕在如何对文本进行两次旋转（翻转一次） y 轴，并再次围绕假想圆的中心）。
