console
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>汉字</title>
<script src="https://cdn.jsdelivr.net/npm/hanzi-writer@1.3/dist/hanzi-writer.min.js"></script>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
</head>
<body>
<input type="text" id="hanzi"/>
<button id="animate-button">Animate</button>
<div id="character-target-div"></div>
</body>
<script>
function animate(length, arr) {
if(length == arr.length) return;
arr[length].animateCharacter({
onComplete: function(){
animate(length+1, arr);
}
})
}
document.getElementById('animate-button').addEventListener('click', function() {
var hanzi = document.getElementById("hanzi").value;
var arr = hanzi.split("");
var content = document.getElementById("character-target-div");
while(content.hasChildNodes()) {
content.removeChild(content.firstChild)
}
var hanziarr = [];
for (var i = 0; i < arr.length; i++) {
var writer = HanziWriter.create('character-target-div', arr[i], {
width: 200,
height: 200,
padding: 5,
showCharacter: false,
showOutline: true,
strokeColor: '#EE00FF',
onLoadCharDataError: function(reason){
console.log(reason);
}
});
hanziarr.push(writer);
}
animate(0, hanziarr);
});
</script>
</html>