console 命令行工具 X clear
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>