本節書摘來自華章計算機《html5 canvas遊戲開發實戰》一書中的第2章，第2.1節,作者：張路斌著， 更多章節内容可以通路雲栖社群“華章計算機”公衆号檢視。
所謂基本圖形，就是指線、矩形、圓等最簡單的圖形，任何複雜的圖形都是由這些簡單的圖形組合而成的。我們首先來了解一下這些簡單圖形的繪制方法。
2.1.1 畫線
你可能是第一次接觸canvas繪圖。首先，我們通過繪制一個簡單的直線來學習canvas的功能。其代碼如代碼清單2-1所示。
代碼清單 2-1
運作後的效果圖如圖2-1所示。
下面來解釋一下代碼清單2-1中的代碼。
這是在html中嵌入canvas标簽。canvas标簽内部可以添加文字或html代碼，如果浏覽不支援canvas标簽，那麼浏覽器會自動跳過canvas标簽而運作canvas内部的html代碼。
以上代碼是擷取html中的canvas标簽。
這裡傳回一個用來繪制環境類型的環境。它傳回的是一個 canvasrenderingcontext2d 對象，該對象實作了一個畫布所使用的大多數方法。目前，canvas隻支援二維環境，是以參數隻能是“2d”。當然，将來也可能會支援三維。
以上代碼用來設定線條寬度。
此處設定畫筆顔色為紅色，這裡的顔色值可以是英文字母，也可以直接使用顔色的rgb值，如紅色為“#ff0000”，黑色為rgb(0,0,0)等。
以上代碼建立一個新的路徑。
以上代碼将畫筆光标位置移動到坐标(10,10)處。
以上代碼從目前坐标開始移動畫筆到坐标(150,50)處，繪制一條直線。
上面代碼表示開始繪制定義好的路徑。
以上過程其實和我們在紙上畫一條線是同樣的道理，首先我們要選擇一種顔色及線條的粗細，然後用畫筆從一個點開始畫到另一個點，這樣就可以畫出一條線了。
在畫線的時候，也可以使用linecap來定義線帽的樣式，如在代碼清單2-2中，分别使用了linecap的3種樣式。
代碼清單 2-2
運作代碼，可以看到3種不同的線帽，如圖2-2所示。
2.1.2 畫矩形
下面來看看如何畫一個矩形，其代碼如代碼清單2-3所示。
代碼清單 2-3
運作效果如圖2-3所示。
在canvas裡，用strokerect函數來繪制一個矩形，它需要4個參數，分别是：起點坐标x和坐标y、矩形長、矩形寬。
也可以用下面代碼來替換strokerect函數，它可以實作同樣的功能。
如果要繪制一個實心的矩形，可以用fillrect函數，如代碼清單2-4所示。
代碼清單 2-4
運作效果如圖2-4所示。
fillrect函數同樣需要4個參數，分别是：起點的坐标x和坐标y、矩形長、矩形寬。與strokerect函數不同的是，畫實心圖形的時候，用fillstyle來定義圖形的顔色。
當然，這裡也可用另一種實作方法繪制矩形，代碼如下：
2.1.3 畫圓
圓其實就是一個360度的圓弧。在canvas中，可使用arc函數來畫一個圓弧。先看代碼清單2-5所示代碼。
代碼清單 2-5
運作效果如圖2-5所示。
arc函數的6個參數分别是：圓弧中心的坐标x和坐标y、圓弧半徑、起始角度、終止角度、是否逆時針。需要解釋的是，第4個和第5個參數需要傳入的是圓弧的弧度，如要畫30度的角，需要将其轉化成弧度30*math.pi/180；第6個參數用來控制圓弧是順時針旋轉還是逆時針旋轉。
和畫矩形一樣，同樣可以用fill函數來畫一個實心的圓弧，如代碼清單2-6所示。
代碼清單 2-6
運作效果如圖2-6所示。
畫圓時，隻需要讓起始角度和終止角度之差為360度即可，具體代碼如代碼清單2-7所示。
代碼清單 2-7
運作效果如圖2-7所示。
2.1.4 畫圓角矩形
canvas中沒有直接畫圓角矩形的api，但是我們可以用arcto函數來完成圓角的繪制，然後結合直線繪制，就可以完成圓角矩形的繪制了。在繪制圓角矩形之前，我們先來繪制一個圓角，如代碼清單2-8所示。
代碼清單 2-8
運作效果如圖2-8所示。
在代碼清單2-8中，arcto函數是用來為目前的子路徑添加一條圓弧的，它需要5個參數，分别是：點p1的坐标x和坐标y、點p2的坐标x和坐标y、圓弧的半徑radius。該圓弧有一個點與目前位置到 p1 的線段相切，還有一個點和從 p1 到 p2 的線段相切。這兩個切點就是圓弧的起點和終點，圓弧繪制的方向就是連接配接這兩個點的最短圓弧的方向。
在很多常見的應用中，圓弧開始于目前位置而結束于 p2，但情況并不總是這樣。如果目前的位置和圓弧的起點不同，這個方法将會添加一條從目前位置到圓弧起點的直線，而且總是将目前位置設定為圓弧的終點。
有了對arcto函數的了解，畫圓角矩形就簡單多了，如代碼清單2-9所示。
代碼清單 2-9
運作效果如圖2-9所示。
2.1.5 擦除canvas畫闆
擦除canvas畫闆上的内容需要用到clearrect函數，此函數可以擦除一個矩形區域。它需要4個參數：起點的坐标x和坐标y，擦除區域的長和寬。其用法如代碼清單2-10所示。
代碼清單 2-10
上面的代碼先繪制了一個紅色的實心矩形，然後在紅色矩形中間擦除了一個50×50的小矩形，效果如圖2-10所示。