漢字的臨摹是語文類教育產品中非常容易用到的功能，尤其是小學一到三年級，本篇由社群同學 amaterasu 為大家帶來簡單易用的用於 web 平臺漢字臨摹元件分享，歡迎閱讀！
前言
我在一個線上教育類的公司做 Cocos 遊戲課件的研發。在 18 年之前，我寫過大約兩年的 web，雖然後來莫名其妙的變成了 Cocos 開發者，但由於我的遊戲是在瀏覽器內執行的，平常一直在研究 web 方面的東西。
在以前接觸過的漢字類的開源專案中，有一個名叫 hanzi-writer 的東西其實是能滿足大部分需求的，作者公佈的 cdn 上有很多基於 svg 的筆順資料，很贊。
Cocos 內效果
支援 hanziWriter 所有的 api。
hanziWriter 比較常用的功能與特點有：
1。支援幾乎所有常用漢字的筆畫，支援偏旁部首，各類顏色。
2。自動執行動畫。
3。錯誤筆順時自動提醒下一筆。
4。豐富的回撥與回撥引數。
5。支援原始字串的操作，你可以獲取到筆順資料後去做任何你想做的事情，漸進式。
原理
其實原理並不難，我們都知道 Cocos 的適配策略裡是有設計解析度和螢幕實際解析度兩種解析度的轉換的。
在 Cocos 內將 hanzi-writer 匯入為外掛，並且生成對應的 dom 節點，然後將這個 dom 節點先應用為實際解析度，再根據真正的字的大小對其進行縮放就行了。
這裡主要的難點就是如何將 dom 節點放到正確的位置，並進行正確的縮放。
這個思想其實 Cocos 引擎內部是有應用過的，比如引擎內的 video 和 input 其實都是在 Cocos 上新建了一個全新的節點覆蓋在 canvas 容器上，這也是為啥不能控制這兩個玩意的層級。
為什麼不在 Cocos 內做呢？
首先 video 是 H5 原生 api，canvas 解析影片或許可以，但是效率肯定很低的，input 是因為需要調起手機端的鍵盤之類的瀏覽器預設行為。
按上邊說的，首先需要獲得當前實際螢幕對於設計尺寸的縮放率，這個 api 我在引擎原始碼內找到了。
我的 Cocos 引擎版本是 2。3。3，如果這個 api 用不了就需要去看看引擎處理 video 標籤的檔案內是否有用別的方法。
最終我們需要拿這些資料去計算當前的漢字 dom 在螢幕的座標、縮放和變形等，實際中還需要考慮 Cocos 容器 canvas 的 paddding 等等。
在 Cocos 內我已經做好了這個元件，同事用起來也很爽（因為有筆順的資料），也幾乎用不到美術參與進來。
甚至還給美術小姐姐們做了一個自動生成漢字筆順的工具，也是基於 hanzi-writer 去寫的。
