Javascript 有没有一种方法可以使用CSS3/Canvas绘制曲线/圆弧文本
我正在尝试使用CSS3、HTML画布，甚至SVG（例如，请参见下图）制作一个曲线文本效果？这可能吗？如果是，我怎样才能达到这个效果 更新：澄清一下：将以这种方式设置样式的文本将是动态的Javascript 有没有一种方法可以使用CSS3/Canvas绘制曲线/圆弧文本,javascript,html,canvas,css,Javascript,Html,Canvas,Css,我正在尝试使用CSS3、HTML画布，甚至SVG（例如，请参见下图）制作一个曲线文本效果？这可能吗？如果是，我怎样才能达到这个效果 更新：澄清一下：将以这种方式设置样式的文本将是动态的 您当然可以使用canvas完成此操作，请尝试以下代码作为示例： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Testing min-width and
您当然可以使用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>
测试最小宽度和最大宽度
cnv=document.getElementById（“cnv”）；
cnv.宽度=500；
cnv.高度=300；
ctx=cnv.getContext（“2d”）；
ctx.font=“bold 12px无衬线”；
text=“abcdefghijklm”
对于（i=0；i它做得并不完全正确，但我相信你会设法根据自己的喜好来调整它；） 我能够从 进入Chrome，但在IE中不起作用 您可以使用SVGWeb
或者，您可以在服务器站点（在.NET/PHP中）像Http处理程序一样编写自己的图像生成实用程序，并将文本传递给它，它将通过使用图形库和动态渲染图像返回GIF/PNG。或者您可以使用一些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>
测试最小宽度和最大宽度
.num1{
-webkit变换：平移（0px，30px）旋转（-35度）；
}
.num2{
-webkit变换：平移（0px，25px）旋转（-25度）；
}
.num3{
-webkit变换：平移（0px，23px）旋转（0deg）；
}
.num4{
-webkit变换：平移（0px，25px）旋转（25度）；
}
.num5{
-webkit变换：平移（0px，30px）旋转（35度）；
}
span{显示：内联块；边距：1px；}
abcde
...
<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>
...
。。。
路径上的文本
...
这向您展示了如何使用HTML5和canvas实现这一点。上面的另一个回复也有类似的想法，即使用canvas.rotate方法。这一个还使用canvas.translate。有一个jQuery插件，它使用CSS3绘制文本曲线，名为。它相当不错，有一系列的配置选项。我想它在IE8上不起作用，但我想大多数CSS3都不起作用
还有一个演示页面，其中有一些示例 你可以试试这个jQuery插件
它有许多自定义文本拱门和文本圆圈的选项。
适用于所有主流浏览器和操作系统。这不是一个纯粹的CSS解决方案，但CircleType.js非常适用于弧形文本
我使用上面提到的教程（由Simon Tewsi编写）编写了一个关于内核问题的更好的解决方案。不使用库，纯JS 见
注意：所以我也要求将JSFIDLE中的所有代码都放在这里。我不认为这是明智的，因为代码太多，所以我只添加函数名。您可以将SVG与TextPath一起使用，如下所示：
函数更新消息（str）{
document.getElementById（“MyMessage”）.textContent=str；
}
更改文本
这篇文章是弯曲的
-ms-<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>
function drawTextAlongArcInside(ctx, str, font, color, radius, angle, centerX, centerY, wspace)