HTML5 : 筆順練習第三版(2019版)

我的「雄 : HTML5 筆順練習」工具自 2012 年二月起，有 2012 陽春版、2013 第二版，及本文要介紹的第三版(2019版)。有關HTML5筆順練習工具的起源，可以參考文末相關連結中有關第二版的舊文。除了最陽春的第一版外，另兩個版本都可以在 HTML5 FUN 的網站中使用：

• https://gsyan888.github.io/html5_fun/

HTML5 FUN 筆順練習第三版

不過，目前的發展重心都在本篇所要介紹的第三版。舊版基本上已不再維護。

功能特色

中文識字除了書寫的筆順以外，部件也是提升識字量的好幫手。筆順練習第三版(2019版) 與之前的版本相比，最大的特色是加上了「部件」的功能。

與以前的版本一樣，筆順練習第三版也是使用「中華民國教育部『國字標準字體筆順學習網』」的筆順資料；而基本的部件資料則是由我建立的資料庫中下載，使用者可以再行自訂。

【圖1】筆順練習第三版「多字模式」

下面來簡單介紹一下筆順練習第三版的功能：

• 跨平臺：在電腦或行動載具的網頁瀏覽器中執行。能下載並練習「中華民國教育部『國字標準字體筆順學習網』」中的國字注音筆順。
• 支援離線使用：在行動載具中將筆順練習工具新增至「主畫面」後，下載過的筆順資料可以在網路離線時使用。
• 筆順練習時可自訂是否要提示下一個筆畫、錯誤之處、筆順序號及畫筆粗細。
• 可自訂部件：使用筆刷工具在字的筆畫上填色，同樣顏色的筆畫就能結合成部件，每個字最多可以設定八個部件；可以設定三組不同的部件。
• 提供匯出與匯入的功能：可以匯出指定字的筆順資料及部件設定，並儲存成檔案；之後可利用匯入檔案的功能，能將自己或別人匯出過的筆順、部件設定檔重新載入使用，並自行選取要出現在選單上的字。
• 支援由網址中設定要練習的字及設定部件；並提供分享網址輸出的功能。
• 筆順練習的結果可以匯出、匯入與播放動畫。(2022.02.28.起加入)
• 筆順練習時，可以啟用左手模式，以左手書寫。(2022.03.19. 起加入)
• 其它功能：部件拼圖、全字筆畫及教育部教育百科詞條連結。

操作說明

筆順練習第三版有「多字模式」，和練習時的「單字模式」兩種操作模式。兩種模式均可以搭配畫面左下角「塗鴉工具箱」中的畫筆工具進行解說、教學；或使用部件填色工具來設定國字的部件。

【圖2】塗鴉工具列

而在筆順練習時，可以按畫面右下角「設定」鈕，打開設定列，依需求來控制練習時的功能選項。

【圖3】選項設定列

多字模式

筆順練習第三版載入指定的國字(注音)筆順資料以後，會如【圖1】所示，進入「多字模式」。所有的字依序呈現在畫面中，並依部件設定以不同的顏色來顯示部件。

「多字模式」中，如果點了某個字的方塊，就會進入「單字模式」。

「多字模式」除了當選單，此時也可以拖曳部件，甚至白底的方塊，整個畫面就像一塊黑板一樣，可以進行部件教學。

【圖4】「多字模式下」拖曳部件

有關在「多字模式」下的的部件及字塊拖曳操作及示範影片，請參考這一篇：

• 雄 : HTML5 : 筆順練習第三版(2019版)部件教學應用

單字「練習模式」

在「多字模式」中，如果點一下國字方塊，就可以進入該字的「單字模式」。

【圖5】單字模式

在「單字模式」的國字方塊的左側多了一些功能按鈕：

• 【筆順示範】播放國字書寫的筆順動畫。可以利用畫面右下方的「設定」鈕來控制動畫的示範速度。
• 【筆順練習】按一下，即可開始練習書寫該字。
• 錯誤提醒：練習的筆畫如果有錯誤，會出現重點提示，
• 徽章回饋：全字完成後，就可以得到一個徽章。
• 自訂選項：練習時我們可以利用畫面右下方的「設定」鈕來控制一些選項的啟用與關閉，如語音播放、提示下一筆順、顯示提示點、顯示筆畫序號及畫筆的粗細。
• 【部件拆解】按一下後，可以進行以下的動作：
• 拖曳部件：可以自由地拖曳部件至想放的位罝。
• 更換部件組：按一下右側的三個國字方塊，就可以在三個不同的部件設定中切換。
• 自訂部件：按一下畫面左下角「塗鴉工具箱」的按鈕，即可利用部件填色工具，在筆順上填上所屬部件的顏色。
• 儲存部件為圖片：將部件拖曳，並讓游標移動至「下載的圖示」上後放開，即可將部件儲存為圖片。
  
• 【部件拼圖】按一下後，任務就是將已經打散的部件，重新放回國字方塊中拼好。在國字方塊左下角有個「按順序完成」的選項開關，它決定了拼字時，是否要按照順序放。
• 【重新選字】按一下後，即可回到「多字模式」，重新選別的國字。（也可以按右上角的叉叉)。

在「單字模式」的國字方塊下方還有一些選項按鈕：

• 輪廓線
• 十字線
• 字典
• 全字筆畫

上面的功能選項，按按看就可以知道做什麼，所以不再贅述囉！

塗鴉與自訂部件

按了筆順練習畫面左下角的按鈕，就可以打開或是關閉塗鴉工具列。塗鴉工具列有有兩大功能：

• 塗鴉工具：包括畫筆、橡皮擦及清除全部。
• 部件工具：包括色盤、快速填色及部件分享。

【圖5】塗鴉工具列

塗塗寫寫

打開塗鴉工具列後，預設是啟用「調色盤」圖示的部件填色工具，如果想要塗塗寫寫，就按一下它左邊的「畫筆」圖示的塗鴉工具。接著就可以點一下色盤上的色塊來換顏色，或是利用色盤右側的「拉桿」來調整畫筆粗細。

如果想要擦掉某些線條，就點選橡皮擦工具，然後對準塗鴉區中要擦拭的線條按一下即可刪除。

想要把所有塗鴉的內容一次擦掉，就按塗鴉工具列中，最左側的「空白文件」圖示。

部件設定

在筆順練習第三版中，當我們打開塗鴉工具列後，預設是啟用「調色盤」圖示的部件著色工具，如果用完塗鴉工具，按一下「調色盤」圖示，就可以更換。

【圖6】啟動部件著色模式

在「部件著色模式」中，只要在要塗色的筆畫上按一下，該筆畫就會被上色。同顏色的筆畫會被結合成一個部件；調色盤中共有八個顏色，也就是一個字最多可以拆解為八個部件(應該是夠用了吧？)。

為了能比較快將筆畫上色，在「部件著色模式」下，調色盤右側有一個「剪刀圖示」的「快速填色」選項。當這個選項啟用後，點到的筆畫開始，一直到最後一筆畫，都會被填上一樣的顏色。

另外，在「部件著色模式」時，最右邊還有一個分享的圖示，按下去以後，就可以產生一個帶有字及部件設定的網址，利用這個網址可以保存自訂的部件設定，也能分享給學生使用。

有關部件的設定方法及部件分享的方法，可以參考這一篇：

• 雄 : HTML5 : 筆順練習第三版(2019版)部件的設定與分享

如果想將部件下載為圖片檔案，可以參考這一篇：

• 雄 : HTML5 : 筆順練習第三版(2019版)下載部件為圖片

筆順及部件資料的匯出與匯入

HTML5 FUN 的筆順練第三版，下載完教育部網站的筆順資料，及我的部件設定資料以後，會將它們合併，並暫存在所使用的電腦或是載具中。如果資料沒被清除掉，下次使用同樣的字時，就不用透過網路，直接載入暫存的那一份。這些資料也可以自行匯出成檔案，之後再以「從檔案匯入」的方式來離線載入。這個方法應用在網路較不順暢，甚至無網路的環境，還滿好用的。另外，如果想要儲存自訂的部件，也是不錯的方法。

如何將筆順及部件資料匯出與匯入，可以參考這一篇：

• 雄 : HTML5 : 筆順練習第三版(2019版)筆順與部件資料的匯出與匯入

筆順練習記錄的匯出、匯入與播放

筆順練習第三版中，學生筆順練習時，如果完成該字，在練習區的手稿可以匯出成一個檔案，上傳給老師以後，老師可以使用自己的電腦或是載具，將學生的筆順練習記錄匯入，並觀看習寫的記錄。詳細的說明與示範影片，可以參考這一篇：

• 雄 : HTML5 : 筆順練習第三版(2019版)習寫結果匯出與匯入

精華文章清單

• 雄 : HTML5 : 筆順練習第三版(2019版)部件教學應用

• 雄 : HTML5 : 筆順練習第三版(2019版)部件的設定與分享

• 雄 : HTML5 : 筆順練習第三版(2019版)下載部件為圖片

• 雄 : HTML5 : 筆順練習第三版(2019版)筆順與部件資料的匯出與匯入

• 雄 : HTML5 : 筆順練習第三版(2019版)習寫結果匯出與匯入

• 雄 : HTML5 : 筆順練習第三版(2019版)左手習寫模式

• 雄 : TPET-生生用平板-師師有法寶-筆順練習QRCode產生器

• 雄 : HTML5 : 筆順練習第三版(2019版)習寫筆跡存為圖片

版權聲明

• 本程式所使用的筆順資料來自：
  中華民國教育部「國字標準字體筆順學習網」
  https://stroke-order.learningweb.moe.edu.tw/
• 教育部的筆順網採創用CC「姓名標示－非商業性－禁止改作3.0臺灣版」授權條款，本工具亦與筆順網採用相同的授權條款，不得用於商業用途。
  
  
  
  
  

相關連結

• 雄 : HTML5 FUN
• 雄 : HTML5 : stroke 國字注音筆順練習(第二版)
• 雄 : HTML5 : 筆順練習偵錯優化
• 雄 : 教育部筆順學習網部份字的小臭蟲

更新記錄

• 2024.05.27 v.2.4L 手動修正教育部筆順網有問題的筆順資料，修正字: 懂, 贐, 榻。
• 2024.05.18 v.24K 下載 PNG 格式部件圖片，改以去掉外圍留白，尺寸最小化的方式回傳。
• 2024.05.17 v.2.4J 解決沒有在每一個筆畫的 SVG 繪圖指令最後加上 Z (結束 path) ，造成在有些軟體中，部件中有交叉的筆畫會空白的問題。
• 2024.05.17 v.2.4I 部件拆解頁面中的下載按鈕，按下後會出現「下載部件SVG」、「下載筆畫SVG」兩個選項，可下載全字的部件，或是全字的筆畫 SVG 格式圖檔；更新可下載的國字清單至 6063個字；支援 UTF-32 的國字；base64 encode、decode 改用較新的方法，可以支援 UTF-32。
• 2024.05.13 v.2.4H 按下部件下載鈕或是觸控多點後拖曳部件的話，就下載全字的 SVG 格式圖檔
• 2024.04.17 v.2.4G 由於 Google chart API 停用，將 QRCode 製圖改呼叫 QuickChart QR Code API ( https://quickchart.io/qr-code-api/ )。
• 2023.10.20 v.2.4F 匯出習寫結果新增可將習寫筆跡匯出為 PNG 圖片的功能。
• 2023.08.30 v.2.4D 修正注音筆順練習沒抓到語音檔路徑的問題，將教育部原有的 .WAV 音檔改存成 .mp3 音檔，存放於 GitHub 的空間中，播放時會先放一次女聲，隔兩秒，再播放男聲。
• 2023.08.28 v.24C 在輸入要練習的字對話框左下角，加一個「生字」搜尋的圖示，按下去以後，會跳到江明勳老師的網誌「嘰哩呱啦ACE (2代) : 第1918回-師師有法寶-4-雄-筆順練習-南一-康軒-翰林-國小國語- QR Code 大合集」。
• 2023.08.17 v.2.4B 在分享的 QRCode 右下角加一個下載的圖示，按下後可以下載 QRCode，按一下 QRCode 可以隱藏 QRCode。
• 2023.07.26 v.2.4A  修正分享網址之「不含部件設定」鈕在 iOS 中切換後，並沒有執行將網址複製到剪貼簿的問題(註:剪貼簿的操作命令必須放在 touchend 中才能執行)。
• 2023.05.20 v.2.4z 查詢字的音檔路徑及部件設定改由檔案中查詢，無法工作才到 Google Drive 中查試算表資料，速度提升很多。
• 2023.05.09 v.24y 完成練習後徽章數即可累加一個，可顯示多個徽章在多字模式，單字模式練習完成後，則以數字呈現個數。
• 2023.05.03 v.24x 在分享部件的對話框中新增一個選項，可以控制只產生生字而不帶部件設定的網址，以縮短網址，避免像學習吧的「連結」欄位不能輸入太長字串的問題。
• 2023.04.07 v.24w 解決因為本機快取中的筆順資料不完整，程式未檢查並重新下載或是由練習清單中刪除，以致後續程序中斷而不能使用的問題。
• 2023.03.02 v.2.4v 解決未下載到部件設定，在自訂部件後，結束儲存時會中斷程式的問題。
• 2022.12.09 v.2.4u 微調提示點的顯示，畫過圈的地方不會重覆畫，保持透明度。
• 2022.11.30 v.24t 分享網址的對話框中加一個顯示網址 QRCode 的按鈕。
• 2022.11.10 v.2.4s 將分享鈕分享的網址參數先以 encodeURI 編碼，以免張貼網址時有誤。
• 2022.10.03 v.2.4r 由網址帶入要練習的字串，可能因為又被編碼過，導致進入程式後，解碼失敗，現在會先檢查 % 是否被編碼為 %25，如果是，就先以 unescape 解碼後，再繼續後面的程序。
• 2022.06.24 v.2.4q 部件操作的畫面，讓按右鍵會跳出的選單不出現。
• 2022.06.13 v.2.4p 解決部件下載為圖片時，因為畫面沒清除完全，造成下載所有部份為圖片的結果是累加的，而不是一個部件一個檔案。
• 2022.03.20 v.2.4o 習寫偵錯與提示優化；習寫記錄重播時，在下方顯示花費的時間。
• 2022.03.20 v.2.4n 習寫記錄會將錯的也記錄下來，播放時，錯的軌跡使用紅色，對的使用黑色來重現，方便老師觀察需加強之處。
• 2022.03.19 v.24m 修正在按了「左手模式」的按鈕後，在習寫區留下多餘直線的問題。
• 2022.03.19 v.24k 在筆順練習加入「左手模式」，可以正寫或反寫練習(2022.02.28 呂北老師建議)。
• 2022.03.13 v.24j 修正筆順習寫時，部份檢查超出筆畫的問題，讓練習時橫撇可以更容易過關。
• 2022.02.28 v.2.4i 加入筆順習寫結果的匯出、匯入與播放的功能。
• 2022.02.25 v.2.4h 修正在多字模式中，練習徽章未加上去；修正在 v2.4 後，不支援Path2D的瀏覽器中，並未抓到處理的字是哪一個，很多功能其實未運作。
• 2022.02.20 v.2.4g 修正部件選擇鈕在重新輸入要下載的字時未重設為第一個;修正iOS無法將分享網址複製到剪貼簿的問題。
• 2022.02.19 v.2.4f 下載部件圖片只偵測了滑鼠，行動載具會誤判，改成如果行動載具就只能下載單一部件。
• 2022.02.19 v.2.4e 修正因為加了下載部件的按鈕而造成展示筆順動畫錯位。
• 2022.02.19 v.2.4d 在單字部件模式下，將部件拖曳至左下角的下載圖示上，可以下載所有部件。
• 2022.01.12 v.2.4c 在拼圖遊中，禁用塗鴉工具，以免試圖更新部件，造成錯誤。
• 2022.01.06 v.2.4b 拼圖遊戲加入一個是否按部件順序才算完成的選項。
• 2021.12.25 v.2.4a 部件分解如果只有一個部件的，改以底線符號代替字串。
• 2021.12.25 v.2.4  支援最多三組部件設定。
• 2021.12.22 v.2.3f 用 coloring for colorblindness 調整了色盤。
• 2021.12.21 v.2.3e Object.values 最佳化後有問題，改用 Object.['values']。
• 2021.12.21 v.2.3d 塗鴉工具箱加入一個快速填色的圖示，可將點選的筆畫到最後一畫，全部填同樣的顏色。
• 2021.12.18 v.2.3c 部件拼圖的位置調整。
• 2021.12.17 v.2.3b 部件拼圖亂數取位置的程序重寫。
• 2021.12.17 v2.3a 修正由 g0v 下載的程序有個參數用成 stroke. 的，以致程序中斷。
• 2021.12.17 v2.3 修正 !enablePath2D 建立部件的 partsPath ( new Path2D() ) 忘了先判斷是否有支援，並幫忙建立替代的資料。
• 2021.12.17 v2.2 調整預設的部件塗色用色盤，修正清除完 localStorage , 未把 SoundAndPartsDataFromGDive 清空，無法重新下載部件和聲音設定。
• 2021.12.16 v2.1 修正畫筆塗鴉模式未將部件圖層禁用的問題。
• 2021.12.16 v2.0 修正部件設定筆畫序號未檢查是否異常的問題。
• 2021.12.15 修正未設定部件的筆畫會無法著色的問題。
• 2021.12.14 將吃資源的部件功能轉換為兩個 CanvasContext 就能運作的方式。
• 2021.12.07 .h 在塗鴨工具的部件設定時，右下角多一個產生帶部件連結的分享按鈕；解決下載文字輸入對話框的文字全選變數命名和其它的衝突的問題。
• 2021.12.04 .g 修正繪圖區清除的 clearCanvasContext function 名稱一樣，造成嚴重錯誤；在文字輸入區右下角加一個「全選」的小圖示。
• 2021.12.04 .f 塗鴨工具的繪圖功能增強，橡皮擦改以線為單位來擦拭。
• 2021.12.01 加入顯示全字筆順的功能。
• 2021.11.29 調整練習偵錯的靈敏度，加上了最大筆寬的 30%~60%；加入裝置旋轉偵測的功能，讓使用者決定是否要重新載入程式，以調整版面配置。
• 2021.11.27 筆順練習的方塊右上角加一個叉叉按鈕，功能與「重新選字」一樣(結束練習，進入選單)；在等待輸入文字時，讓左側塗鴨工具不能出現，以免清掉了對話框。
• 2021.11.26 解決匯入筆順如果遇到 words 為空的時候會失敗。
• 2021.11.25 修改筆順資料載入的方式：先以批次的方式由 GDrive 中下載音檔路徑及部件設定，再直接由教育部的網站抓筆順資料。
• 2019.03.26 初稿