Javascript汉字笔画笔顺绘制库Hanzi Writer使用示例

<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hanzi-writer@2.2/dist/hanzi-writer.min.js"></script>

<div id="character-target-div"></div>
<script type="text/javascript">
    $(document).ready(function(){
    	var writer = HanziWriter.create('character-target-div', '木', {
		  width: 200,
		  height: 200,
		  padding: 5,
		  strokeColor: '#555'
		});
    });
</script>

<div id="character-target-div"></div>
<script type="text/javascript">
    $(document).ready(function(){
        var writer = HanziWriter.create('character-target-div', '木', {
			width: 200,
			height: 200,
			padding: 5,
			strokeColor: '#555',
			charDataLoader: function(char, onComplete) {
			    $.getJSON("/hanzi-writer-data-2.0.1/data/" + char + ".json", function(charData) {
			      onComplete(charData);
			    });
			}
        });
    });
</script>

<div id="character-target-div"></div>
<script type="text/javascript">
    $(document).ready(function(){
    	var writer = HanziWriter.create('character-target-div', '子', {
		  width: 200,
		  height: 200,
		  padding: 5,
		  showCharacter: false
		});
		writer.animateCharacter();
    });
</script>

<div id="character-target-div"></div>
<script type="text/javascript">
    $(document).ready(function(){
    	function renderFanningStrokes(target, strokes) {
		  var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
		  svg.style.width = '75px';
		  svg.style.height = '75px';
		  svg.style.border = '1px solid #EEE'
		  svg.style.marginRight = '3px'
		  target.appendChild(svg);

		  var group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
		  var transformData = HanziWriter.getScalingTransform(75, 75);
		  group.setAttributeNS(null, 'transform', transformData.transform);
		  svg.appendChild(group);

		  strokes.forEach(function(strokePath) {
		    var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
		    path.setAttributeNS(null, 'd', strokePath);
		    path.style.fill = '#555';
		    group.appendChild(path);
		  });
		}

		HanziWriter.loadCharacterData('屋').then(function(charData) {
		  var target = document.getElementById('character-target-div');
		  for (var i = 0; i < charData.strokes.length; i++) {
		    var strokesPortion = charData.strokes.slice(0, i + 1);
		    renderFanningStrokes(target, strokesPortion);
		  }
		});
    });
</script>