动态输出汉字笔画

hanzi-writer


<html>
	<head>
		<meta charset="utf-8">
		<title>汉字title>
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/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">Animatebutton>
		<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>

复制代码

你可能感兴趣的:(matlab,php,python)