如何使用arctext.js插件制作文字平滑弯曲的弧形效果？

本文共计1892个文字，预计阅读时间需要8分钟。

本文介绍了实现文字平滑弯曲效果的插件-arctext.js。分享给家长，具体如下：

+ 形状的文字 + 产品的大家往往是很任性的，说做一个宣传页，一个类似门槛的效果，每次文字都不一样，但效果...。

本文介绍了实现文字平滑弯曲弧形效果的插件-arctext.js，分享给大家，具体如下：

扇形的文字

有时候产品大佬就是很任性，说做一个宣传页，一个类似拱门的效果，每次文字不一样，但是文字得呈现拱形状，类似上图啦。

尝试自己使用canvas画和css3的rotate旋转div，两种方法都是计算旋转角度的时候很麻烦，因为可能5个字10个字，但是得均匀地呈拱形分布，要知道让每个文字都沿着弯曲路径排布相当的复杂，于是便发现了这个好用的插件---arctext.js

它能够自动计算每个文字正确的旋转角度，并且生成对应的CSS ，其实就是基于css3和jquery，使用起来也很方便。

1.创建一个容器装文字

<h3 id="title">文字弯曲效果类似扇形拱桥状</h3>

2.引入jquery和arctext.js

<script type="text/javascript" src="//code.jquery.com/jquery-1.8.2.min.js" ></script> <script src="jquery.arctext.js"></script>

3.调用arctext的方法：

$(function(){ $("#title").show().arctext({ radius:180 }) })

arctext参数说明：

• radius:弯曲度数，最小的值是文字长度，如果设置为-1，则显示直线。