canvas繪制有兩神方法:
1)、填充(fill)
填充是將圖形內部填滿.
2)、繪制邊框 (stroke)
繪制邊框是不把圖形內部填滿，只是繪制圖形的外框.
當我們在繪制圖形的時候，首先要設定好繪制的樣式，然后我們就可以調用有關的方法進行繪制
fillStyle屬性
填充的樣式，在這個屬性里面設置填入的填充顏色值
strokeStyle屬性
圖形邊框的樣式，在這個屬性里面設置填入邊框的填充顏色
繪制矩形案例：
在body的屬性里面，使用onload="draw('canvas' )“語句，調用腳本文件中的draw函數進行圖形繪畫
畫布的創建方法：指定 id ， width（畫布寬度）， height（畫布高度）
創建一個畫布，長度為600，高度為400
<body onload="draw('canvas')">
<canvas id="canvas" width="600" height="400"></canvas>
</body>
引入一個名為canvas的is腳本，js腳本的語言編碼是utf-8
1 function draw(id){ 2 var canvas = document.getElementById(id); 3 var context = canvas.getContext('2d'); //getContext() 方法可返回一個對象
4 context.fillStyle = "green"; // 設置或返回用於填充繪畫的顏色、漸變或模式
5 context.strokeStyle = "#fff"; //圖形邊框的填充顏色
6 context.lineWidth = 5; //用寬度為 5 像素的線條來繪制矩形：
7 context.fillRect(0,0,400,300); // x軸 y軸 寬 和 高 ,繪制“被填充”的矩形
8 context.strokeRect(50,50,180,120); //繪制矩形（無填充）
9 context.strokeRect(110,110,180,120); 10 }
使用filiRect方法和strokeRect方法來填充矩形和繪制矩形的邊框
context. fillRect (x,y,width,height)
context.strokeRect (x,y,width,height)
這兩種方法的參數都是一樣的，x是指拒形的起點橫坐標，y是指拒形的縱坐標.坐標的原點是canvas畫布的最左上角，
width是指拒形的長度，height是指矩形的高度.
繪制圓形案例：
創建圓形路徑時，需要使用圖形上下文對像的arc方法。
context.arc (x,y,radius,starAngle,endAngle,anticlockwise)
x是繪制圓形的起點橫坐標，y是繪創圓形起點的縱坐標，radius是圖形的半徑，
starAngle是開始的角度，endAngle是結束的角度·
anticlockwise是否按順時針方向繪制
繪制半徑與圓弧時指定參數為開始弧度與結束弧度，也可以把角度換成弧度
var radius = degrees *Math.Pl/180
這個里面的Math.Pl表示的角度是180度，Math.Pl*2的角度是360度.
1 function draw(id){ 2 var canvas = document.getElementById(id); 3 var context = canvas.getContext('2d'); 4 context.fillStyle = "#f1f2f3"; 5 context.fillRect(0,0,400,400); 6 for(var i=0;i<10;i++){ 7
8 context.arc(i*25,i*25,i*10,0,Math.PI*2,true); 9
10 context.fillStyle = "rgba(255,0,0,0.25)"; 11 context.fill(); 12
13 } 14 }
保存文件
1 function draw(id){ 2 var canvas = document.getElementById(id); 3 var context = canvas.getContext('2d'); 4 context.fillStyle = "green"; 5 context.fillRect(0,0,400,300); 6 window.location = canvas.toDataURL('image/png'); 7 }