簡介： 本單元要用HTML5的繪圖功能繪製一個圍棋棋盤，之後可以用滑鼠點擊棋盤依序下黑或白的棋子，棋子還會自動對齊到棋格線上。當然本課程以學習網頁設計的基礎技術為主，較複雜的下棋規則控制程式就等高年級進階課程時再教了！ 網頁頁面設計 請開啟一個HTML網頁，加入一個div物件，使用屬性視窗定義寬高皆為570點，並設定一個框線。畫面如下： 如前面的網頁畫布單元所介紹，HTML5繪圖一定要畫在canvas物件之內，因此請到原始檔到div物件標籤內手動加入canvas，並設定 id="C"，如下： 在div物件標籤內也須手動加入 onmousedown="md()"的事件宣告。 畫棋盤的程式 程式碼如下： 首先要宣告一個 g變數作為繪圖物件之用，接著在 bg 副程式內設定 g 為畫布 C 的繪圖物件。接著是兩個迴圈各畫19條直線與橫線。但是這個 bg 副程式必須在 body的 onload事件時啟動： 試試看執行程式一個棋盤就出現了！ 下棋的程式 下棋的程式要寫在div物件的 mousedown事件，也就是 md副程式中： 首先要宣告一個控制下棋次序，也就是輪到黑或白子的Boolean變數 bw，預設為 false。 因為玩家用滑鼠點棋盤時不可能點得分常準確，因此副程式首先將點擊未製作個正規化的動作，每一格間距是30點就除以30去小數後再乘以30，就會剛好是30的倍數，再平移15點就是格線的交點位置了！ 接著繪製一個圓形的路徑，如果bw=true就填黑色，否則是白色！畫好棋子就讓 bw 值變成相反(true變 false，false變 true)，下次點擊就會是另一種顏色了！ 程式測試畫面如下：