html5基于svg绘制一笔一画的书写汉字动画,享受汉字的魅力吧。缺点:字体不能修改。
使用方法
1、head引入js文件
<script src="js/hanzi-writer.min.js"></script> <script src="js/polyfill.min.js"></script>2、body引入HTML代码
<div id="character-target-div"></div> <button id="animate-button">重写</button> <script> var char = '向往自由人生',writer = []; for (var x = 0; x < char.length; x++) { writer.push(writeChar(char[x])) } function writeChar(char) { return HanziWriter.create('character-target-div', char, { width: 100, height: 100, padding: 5, showOutline: true }); } document.getElementById('animate-button').addEventListener('click', function () { if(writer.length > 0){ writer.map(function(w){ w.animateCharacter() }) } }); </script>