在繪制之前，依據上一節所說的內容獲取context 2維畫布
1 context.moveTo(x,y); 定義繪圖開始 2 context.lintTo(x1,y1); 定義線條畫到的位置 3 context.lineWidth=5; //線條寬度 4 context.strokeStyle="red" //線條顏色 5 context.stroke(); //用於繪制線條
利用上述代碼我們可以繪制
一條，從（x,y）坐標開始，到（x1,y1）結束的寬5個像素，顏色為紅色的直線 這里的x，y坐標是相對於畫布的左上角坐標來看的。
當然我們可以畫線了，當然可以利用線條畫出多邊形，就像在紙上繪制一樣
1 context.moveTo(100,100); 2 context.lineTo(700,700); 3 context.lineTo(100,700); 4 context.lineTo(100,100); 5 context.lineWidth=5; //線條寬度 6 context.strokeStyle="red" //線條顏色 7 context.stroke(); //用於繪制線條
就是利用lineto函數像不同的點延伸直線而已，以上代碼就繪制出了一個三角形
現在多邊形已經畫好了，我們希望可以填充顏色，
1 context.fillStyle="#000"; //用於填充色 2 context.fill();
我們只要利用fillStyle指定顏色，這里的顏色指定和css顏色指定是一樣的
然后fill（）繪制一下就ok了
一張畫布當然不會只畫一個圖形了，我們如何去其他位置在畫一個圖形呢？
有人會說，直接利用moveto 移動到某個像素點，在用lineto進行繪制就行了唄，就像下面代碼一樣
1 context.moveTo(100,100); 2 context.lineTo(700,700); 3 context.lineTo(100,700); 4 context.lineTo(100,100); 5 context.lineWidth=5; //線條寬度 6 context.strokeStyle="red" //線條顏色 7 context.stroke(); //用於繪制線條 8 9 context.fillStyle="#000"; //用於填充色 10 context.fill(); 11 12 context.moveTo(200,100); 13 context.lineTo(800,700); 14 context.strokeStyle="blue"; 15 context.stroke();
我們可以看到，雖然三角形的邊框顏色我們設置的是 紅色，線條的顏色是藍色，可是繪制完之后發現，不論邊框還是線條都是藍色。
這就是canvas繪制機制是基於狀態的繪圖
簡單來說對線條，或則填充色的指定都是一種狀態，后面相同的種類（顏色，線條寬度。。）的指定會覆蓋前面的，這里藍色的指定覆蓋了紅色，我們要怎么做呢？
1 context.beginPath(); 2 context.moveTo(100,100); 3 context.lineTo(700,700); 4 context.lineTo(100,700); 5 context.lineTo(100,100); 6 context.closePath(); 7 context.lineWidth=5; //線條寬度 8 context.strokeStyle="red" //線條顏色 9 context.stroke(); //用於繪制線條 10 11 context.fillStyle="#000"; //用於填充色 12 context.fill(); 13 context.beginPath(); 14 context.moveTo(200,100); 15 context.lineTo(800,700); 16 context.closePath(); 17 context.strokeStyle="blue"; 18 context.stroke();
我們只要加上beginPath和closepath把繪制線路（線條，多邊形，，，）包裹起來，就可以指定包裹部分后面靠的最近的部分狀態會對其起作用。
beginPath表示開始，開始繪制的圖形將於前面的繪制毫無關系，只會聽從后面beginPath之前的狀態
closePath表示結束，結束這段繪制，如果是曲線，會用直線封閉這段曲線，這里不寫，不印象狀態的繪制
完整代碼
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 </head> 7 <body> 8 9 <canvas id="canvas" width="400" height="400" style="border: 1px solid #aaa;display:block;margin: auto;">你的瀏覽器不支持</canvas> 10 11 <script> 12 window.onload=function(){ 13 var canvas=document.getElementById("canvas"); 14 /* canvas.width=100; 15 canvas.height=100; //在此處定義canvas的寬高*/ 16 var context=canvas.getContext('2d'); 17 18 //基於context繪制 19 context.beginPath(); 20 context.moveTo(100,100); 21 context.lineTo(700,700); 22 context.lineTo(100,700); 23 context.lineTo(100,100); 24 context.closePath(); 25 context.lineWidth=5; //線條寬度 26 context.strokeStyle="red" //線條顏色 27 context.stroke(); //用於繪制線條 28 29 context.fillStyle="#000"; //用於填充色 30 context.fill(); 31 context.beginPath(); 32 context.moveTo(200,100); 33 context.lineTo(800,700); 34 context.closePath(); 35 context.strokeStyle="blue"; 36 context.stroke(); 37 context.fillStyle="red"; //用於填充色 38 context.fill(); 39 40 } 41 42 </script> 43 </body> 44 </html>
下一節，我們將會說，弧和圓的繪制。