曲线文字直接javascript

时间:2016-07-09 21:06:55

标签: javascript text arctext.js

我想知道如何使用javascript再次直接制作曲线文本我试过调整代码但似乎没有任何效果。

 $("#demo1").circleType({
   radius: 100
 });

 $("#demo2").circleType({
   radius: 100,
   dir: -1
 });

 $("#demo4").circleType(
   'none'
 );
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://circletype.labwire.ca/js/circletype.js"></script>
<script src="http://tympanus.net/Development/Arctext/js/jquery.arctext.js"></script>

<div id="curveup">
  <p id="demo1">Curve Down.</p>
</div>
<div id="curvedown">
  <p id="demo2">Curve UP.</p>
</div>
<div id="norotation">
  <p id="demo4">No Rotation.</p>
</div>

1 个答案:

答案 0 :(得分:1)

如果您愿意,可以像这样重置innerText。

&#13;
&#13;
$("#demo1").circleType({ radius: 100 });
$("#demo2").circleType({ radius: 100, dir: -1 });
$("#demo4").circleType('none');

$("#undo").on("click", function(){
  $("#demo1").text( $("#demo1").text() );
  $("#demo2").text( $("#demo2").text() );
  $("#demo4").text( $("#demo4").text() );
});
&#13;
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://circletype.labwire.ca/js/circletype.js"></script>
<script src="http://tympanus.net/Development/Arctext/js/jquery.arctext.js"></script>

<div id="curveup"><p id="demo1">Curve Down.</p></div>
<div id="curvedown"><p id="demo2">Curve UP.</p></div>
<div id="norotation"><p id="demo4">No Rotation.</p></div>

<button id="undo">undo</button>
&#13;
&#13;
&#13;