【科迅干货】HTML5汉子书写笔画特效
今天我们来分享一款模拟汉字书写笔画特效果，我们先看图:
这款效果的代码比较少，我们直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>HTML5 汉字书写笔画特效 </title>
<script src="js/hanzi-writer.min.js"></script>
<script src="js/polyfill.min.js"></script>
</head>
<body>
<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>
</body>
</html>
