动态输出汉字笔画

最新推荐文章于 2021-01-12 06:35:16 发布

weixin_33858249

最新推荐文章于 2021-01-12 06:35:16 发布

阅读量1.8k

点赞数 2

文章标签： matlab php python

原文链接：https://juejin.im/post/5cde43a46fb9a07ead59c91d

版权

hanzi-writer

<!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>

复制代码