canvas繪製矩形
阿新 • • 發佈：2019-02-12
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的左上角。
<!DOCTYPE html> <meta charset="utf-8"> <head> </head> <body> <canvas id="juxing" width="400" height="400"></canvas> <script type="text/javascript"> var canvas=document.getElementById("juxing"); //讀取canvas元素的id var context=canvas.getContext("2d"); context.fillStyle="#FF0000"; //填充的顏色 context.strokeStyle="ff0000"; //邊框顏色 context.linewidth=10; //邊框寬 context.fillRect(10,10,50,50); //填充顏色 x y座標 寬 高 context.strokeRect(10,10,50,50); //填充邊框 x y座標 寬 高 context.fillStyle="rgba(0,0,255,0.5)"; //填充的顏色 context.strokeStyle="000"; //邊框顏色 context.linewidth=10; //邊框寬 context.fillRect(30,30,50,50); //填充顏色 x y座標 寬 高 context.strokeRect(10,10,50,50); //填充邊框 x y座標 寬 高 context.clearRect(40,40,10,10); </script> </body> </html>