有没有一种使用CSS3 / Canvas绘制曲线/弧形文本的方法
有没有一种使用CSS3 / Canvas绘制曲线/弧形文本的方法
提问于 2010-05-16 00:29:59
我正在尝试使用CSS3、HTML Canvas甚至SVG (例如，见下图)来制作弯曲文本效果？这个是可能的吗？如果是这样，我怎样才能达到这个效果呢？
更新：澄清:将以这种方式设置样式的文本将是动态的。
回答 10
Stack Overflow用户
发布于 2011-01-17 00:09:41
SVG直接支持路径上的文本，尽管它不会沿着路径“弯曲”单个字形。下面是如何创建它的an example：
...
<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>
...Stack Overflow用户
发布于 2010-05-16 00:59:02
你当然可以用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>它并不完全正确，但我确信你会设法根据你的喜好来调整它;)
Stack Overflow用户
发布于 2010-05-16 02:00:50
或者你可以使用一些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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2840862
复制相关文章
相似问题
腾讯云开发者
