* 戳上方藍字「 開源先鋒 」關註我
推薦閱讀：
大家好，我是開源君！
隨著全球化的推進，漢字作為中華民族傳統文化的重要組成部份，越來越受到國際社會的關註。然而，對於非母語者來說，學習漢字的筆畫順序是一項極具挑戰性的任務。
為了幫助這些人更好地學習漢字，網上有位歪果同仁開發了一個非常實用有意思的的計畫 -
hanzi-writer
。
今天開源君和大家聊聊這個計畫。
計畫簡介
Hanzi-writer
是一個用於漢字筆畫順序動畫的 JavaScript 庫，裏面提供了大量精確的漢字筆畫數據，可以透過手繪模仿的方式來學習和練習書寫漢字,適用於簡體和繁體字元。
透過使用這個庫，我們可以在網頁、行動應用等平台上輕松地檢視漢字的筆畫順序動畫。
該計畫的資料來源來自於 "讓我成為漢字 (Make Me a Hanzi)" 計畫，並進行了一些細微調整。
目前在github上面收獲了3K star，可見還是有非常多的朋友喜歡熱愛中文的。
效能特色
輕量級：HanziWriter 庫只有 30kb（gzipped 之後只有 9kb！），因此它不會讓 Web 頁面膨脹。
相容性好：HanziWriter 使用 JavaScript、HTML5 和 SVG，因此它幾乎可以嵌入任何應用程式，無論是 iOS 還是 Android 套用、桌面套用還是網頁。
功能強大：HanziWriter 提供了 9000 多個最常見的簡體字和繁體字，支持筆畫練習和測驗，幫助使用者更好地掌握漢字書寫技巧。
快速安裝
可以使用script標簽載入 Hanzi Writer，最簡單的就是從 jsdelivr CDN 載入 Hanzi Writer JS，將以下內容放入網頁的頭部:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/hanzi-writer.min.js"></script>
另外，也可以透過npm 載入 Hanzi Writer
npm install hanzi-writer
const HanziWriter = require('hanzi-writer');
基本使用體驗
想要在螢幕上直接渲染，方法很簡單。例如，新建一個目標div標簽
<div id="character-target-div"></div>
再建立 HanziWriter 例項，輸入下面Javascript程式碼
var writer = HanziWriter.create('character-target-div', '我', {
width: 100,
height: 100,
padding: 5
});
效果如下：
當然還可以對字型的大小，高度，顏色進行自行定義調整。
如果希望有動畫的效果，可以呼叫 animateCharacter() 方法來讓它運動起來。
<div id="character-target-div"></div>
<button id="animate-button">動畫</button>
對於的程式碼修改為
var writer = HanziWriter.create('character-target-div', '國', {
width: 100,
height: 100,
padding: 5,
showOutline: true
});
document.getElementById('animate-button').addEventListener('click', function() {
writer.animateCharacter();
});
效果如下：
動畫的方式也很多，包括迴圈動畫，詞組動畫等等。
另外還提供有一些高級用法，包括自訂背景、載入漢字數據等等。
以及API介面呼叫。
不得不說，計畫作者是非常精通中文的。
HanziWriter
是一個非常實用的開源計畫，它為我們提供了一種簡單易用的方法來展示漢字筆畫順序動畫。透過利用這個庫，我們可以幫助更多的人更好地學習和掌握漢字書寫技巧。
更多計畫細節，感興趣的可以到計畫地址進行檢視：
計畫地址：
https://github.com/chanind/hanzi-writer
