有没有办法使用CSS3 / Canvas绘制曲线/弧线文本 [英] Is there a way to curve / arc text using CSS3 / Canvas
本文介绍了有没有办法使用CSS3 / Canvas绘制曲线/弧线文本的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想使用CSS3,HTML Canvas或者甚至SVG来产生曲线文本效果(见下图)。这可能吗?如果是这样,我如何实现这种效果?
更新:要澄清:将以这种方式样式的文本将是动态的。 / p>
解决方案
SVG直接支持文本在路径上,虽然它不会弯曲沿路径的各个字形。以下是您如何创建它的示例:
...
< defs>
< path id =textPathd =M10 50 C10 0 90 0 90 50/>
< / defs>
< text fill =red>
< textPath xlink:href =#textPath>路径上的文本< / textPath>
< / text>
...
I'm trying to make a curved text effect using CSS3, HTML Canvas, or even SVG (see image below for example)? Is this possible? If so, how can I achieve this effect?
Update: To clarify: The text that will be styled this way will be dynamic.
解决方案
SVG supports text-on-a-path directly, though it does not 'bend' the individual glyphs along the path. Here's an example of how you create it:
...
<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>
...
这篇关于有没有办法使用CSS3 / Canvas绘制曲线/弧线文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文