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