canvas是HTML5中新增的一個元素，使用Canvas可以繪製任何你喜歡的圖形。先來認識什麼是Canvas？

1.在頁面上放置一個canvas元素，就相當於在頁面上放置了一塊“畫布”，可以在其中進行影象描繪。

2. canvas 通過 JavaScript 來繪製 2D 圖形，它是逐畫素進行渲染的。

3.在 canvas 中，一旦圖形被繪製完成，它就不會繼續得到瀏覽器的關注。如果其位置發生變化，那麼整個場景也需要重新繪製，包括任何或許已被圖形覆蓋的物件。

我們先使用canvas繪製一個常規的圖形矩形

用canvas繪製圖形需要以下步驟

1.在頁面放置canvas元素，指定它的id，width

2.在body使用onload=“draw（‘canvas’）”，呼叫 javaScript指令碼程式碼繪製矩形的方法（這裡是定義的方法名為draw）

3.獲取canvas元素。

在javaScript程式碼通過document.getElementById方法獲取canvas元素

4.取得上下文context

圖形上下文是一個封裝了很多繪圖功能的物件。需要使用canvas物件的getContext方法來獲取圖形上下文。在這裡將getContext方法的引數設定為“2d”。因為在draw方法中，我們繪製的是平面圖形矩形。

5.設定繪圖樣式

通過strokStyle屬性設定圖形邊框的樣式

6.指定線寬

通過lineWidth屬性指定線寬。

7.繪製矩形

分別使用fillRect方法、strokeRect()方法來填充矩形和繪製矩形邊框

context.fillRect(50,50,100,100);

context.strokeRect(50,50,100,100);

這兩個方法使用同樣的引數。x指矩形起點的橫座標，y指矩形起點的縱座標，width指矩形的寬度，height指矩形的高度。

執行結果：