canvas繪制矩形的思路：
1.先取得canvas元素，用document.getElementById等方法取得canvas對象。
2.取得上下文context，用getcontext取得圖形上下文，參數設置為2D。
3.設定繪圖樣式，fillstyle：填充的樣式，填入顏色值。如：xxx.fillStyle="#F00"; strokeStyle：圖形邊框樣式，填入顏色值。如：xxx.strokeStyle="#000";
4.設置線寬，用linewidth。如：xxx..linewidth=1;
5.繪制矩形，分別用fillRect strokeRect方法來填充矩形和邊框。方法定義如：context.fillRect(x,y,width,height) context.strokeRect(x,y,width,height) x是指起點的橫坐標，y是指起點的縱坐標，坐標原點是canvas的左上角。
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <head> 4 </head> 5 6 <body> 7 <canvas id="juxing" width="400" height="400"></canvas> 8 <script type=text/javascript> 9 var canvas=document.getElementById("juxing"); //讀取canvas元素的id 10 var context=canvas.getContext("2d"); 11 context.fillStyle="#FF0000"; //填充的顏色 12 context.strokeStyle="000"; //邊框顏色 13 context.linewidth=10; //邊框寬 14 context.fillRect(0,0,400,400); //填充顏色 x y坐標 寬 高 15 context.strokeRect(0,0,400,400); //填充邊框 x y坐標 寬 高 16 </script> 17 </body> 18 </html>