上週朋友問到 HTML5 FUN 的數學小白板有推導圓面積公式的元件可用嗎？
小學高年級數學，會利用圓的切割與拼接活動，察覺圓的面積、平行四邊形與長方形的關係。印象中曾看過類似的數位模擬工具，可以解決手工無法輕易將圓切割到很小份後拼接的問題，找了一下，在 GeoGebra 中的這個，由 Bed Prasad Dhakal 所分享的「Area of Circle」，很接近朋友提出的需求：
第一次接觸GeoGebra是2002年在交大上研究所課時的事，早已忘得一乾二淨了。摸索了好幾天，以 HTML5 寫了一個可以獨立運作，用來找出圓面積公式的小工具。
 |
| [圖1] HTML5 圓面積小教具截圖 |
使用圓面積小教具
想要立即玩玩看，就按一下底下的按鈕來啟動工具：
這個圓的面積小工具簡單的功能介紹如下：
- 可設定圓的分割數：以拉桿的方式操作，可以將圓等分為 8～120 個扇形(為了簡化程式，總數均為四的倍數)。
- 按「等分 ? 份」鈕，可以重新將圓等分。
- 按「展開扇形」鈕，可以將圓的扇形展開為上、下兩個物件；展開後的物件可以拖曳，也可以拉到畫面右下角的「回收區」刪除。
- 按「全部清除」鈕，可以將展開的物件全部刪除，並依現有的分割設定，產生新的圓。
- 按「啟用畫筆」鈕，可以在畫面以畫筆塗鴨；按「停用畫筆」則是回到扇形物件的拖曳模式；畫筆可以換顏色，也可以按「清除塗鴨」鈕來清除所有塗鴨內容。
【註】2023.12.09 更新後，長按半圓或是扇形不放，會跳出選單，選單中有「展開」、「收合」、「吸星大法」...等按鈕供操作使用；啟用畫筆後，在塗鴉區長按不放，會出現選單，可以換塗鴉線條的顏色及粗細。(參考 [圖2])
 |
| [圖2] 長按不放會出現的選單 |
建議可以設定不同的「等分數」，並將扇形展開，以多組拼接的扇形，在同一個畫面來觀察。
影片示範
以下的影片簡單地介紹 HTML5 圓面積小教具的操作：
相關連結
更新記錄
- 2023.12.09 增加長按出現選單的功能；半圓(扇形)長按後可以展開或收回；增加「磁吸」功能，物件靠很近會自動對齊；畫筆啟用即可長按出現選單換顏色或粗細。
- 2023.12.08 修正等分按鈕上的文字初始值未同步的問題。
- 2023.11.27 修正在手機直拿時，物件尺寸過大的問題；修正在 iOS 中換顏色後，畫筆未即時更換顏色的問題；按了工具列非塗鴉相關的按鈕後，會自動關閉畫筆的功能。
- 2023.11.21 發布。
回收區
發表文章
老師好~
回覆刪除想請教能把展開之後的扇形再變回原來的扇形嘛？
您好,
刪除如果再按一次工具列中 [等分 n 份] 的黃色按鈕，它會重新產生未展開的。不過，未展開時，是不能用拖曳的方式移動位置的。
Wilson 您好，
刪除2023.12.09更新，增加了新功能，現在圓分割完，對準半圓長按，會出現選單，按「展開」才會展開；反之，展開後的扇形，長按後，按選單中的「收合」即可收合為半圓。