canvas是HTML5中新增的一個元素，使用Canvas可以繪制任何你喜歡的圖形。先來認識什么是Canvas？
1.在頁面上放置一個canvas元素，就相當于在頁面上放置了一塊“畫布”，可以在其中進行圖像描繪。
2. canvas通過JavaScript來繪制2D圖形，它是逐像素進行渲染的。
3.在canvas中，一旦圖形被繪制完成，它就不會繼續得到瀏覽器的關注。如果其位置發生變化，那么整個場景也需要重新繪制，包括任何或許已被圖形覆蓋的對象。
我們先使用canvas繪制一個常規的圖形矩形
用canvas繪制圖形需要以下步驟
1.在頁面放置canvas元素，指定它的id，width，height屬性
2.在body使用onload=“draw（‘canvas’）”，調用javaScript腳本代碼繪制矩形的方法（這里是定義的方法名為draw）
3.獲取canvas元素。
在javaScript代碼通過document.getElementById方法獲取canvas元素
4.取得上下文context
圖形上下文是一個封裝了很多繪圖功能的對象。需要使用canvas對象的getContext方法來獲取圖形上下文。在這里將getContext方法的參數設置為“2d”。因為在draw方法中，我們繪制的是平面圖形矩形。
5.設置繪圖樣式
通過fillStyle屬性設定填充圖形的樣式
通過strokStyle屬性設定圖形邊框的樣式
6.指定線寬
通過lineWidth屬性指定線寬。
7.繪制矩形
分別使用fillRect方法、strokeRect()方法來填充矩形和繪制矩形邊框
context.fillRect(50,50,100,100);
context.strokeRect(50,50,100,100);
這兩個方法使用同樣的參數。x指矩形起點的橫坐標，y指矩形起點的縱坐標，width指矩形的寬度，height指矩形的高度。
運行結果：
