HTML5 Canvas（畫布）實戰程式設計初級篇：基本介紹和基礎畫布元素

歡迎大家閱讀HTML5 Canvas（畫布）實戰程式設計初級篇系列，在這個系列中，我們將介紹最簡單的HTML5畫布程式設計。包括：

• 畫布元素
• 繪製直線
• 繪製曲線
• 繪製路徑
• 繪製圖形
• 繪製顏色，漸變和圖案
• 繪製圖片
• 繪製文字

相關要求

環境要求：Google Chrome, Firefox, Safari, Opera, 或者 IE9以上的現代瀏覽器
程式設計要求：需要有基礎的HTML和Javascript程式設計經驗，相關的畫布程式設計將呼叫Javascript API來處理

HTML Canvas基本元素

HTML5中包含一個專門為HTML畫布功能設計的標籤：<canvas>，所以相關的畫布功能都是基於這個標籤來完成。我們需要將它新增到HTML的body標籤中，如下：

<canvas id="gbCanvas" width="400" height="300"></canvas>

開發小貼士：你可以將width和height新增到CSS檔案中，但是和直接設定canvas的屬性，有一定區別：使用屬性來定義canvas，不僅定義的是canvas物件的高寬，同時也定義了可繪製圖形區域的高寬。而使用CSS來定義做不到這一點，只能定義Canvas本身的大小，所以推薦使用屬性來設定相關高寬

為了能夠能夠呼叫HTML5的畫布API，我們需要來訪問畫布的相關上線文（Context），用來訪問HTML5畫布相關的API，如下：

1.var canvas = document.getElementById('gbCanvas'),
2. context = canvas.getContext('2d'); //更多相關處理程式碼，比如，繪製直線