1.canvas元素基礎知識 （1）在頁面上放置canvas元素，相當於在頁面上放置一塊“畫布”，可以用Javascript編寫在其中進行繪畫的腳本。 （2）在頁面中放置canvas元素 eg： 如上程式，使用canvas和Javascript腳本繪製矩形，步驟如下： （1）取得canvas元素，用 ...
1.canvas元素基礎知識
（1）在頁面上放置canvas元素，相當於在頁面上放置一塊“畫布”，可以用Javascript編寫在其中進行繪畫的腳本。
（2）在頁面中放置canvas元素
eg：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Test</title> 6 <script type="text/javascript" src="script.js" charset="gb2312"></script> 7 </head> 8 <body onload="draw('canvas');"> 9 <h1>元素標簽</h1> 10 <canvas id="canvas" width="400" height="300"></canvas> 11 </body> 12 </html>
1 function draw(id){ 2 var canvas=document.getElementById(id); 3 if(canvas==null){ 4 return false; 5 } 6 var context=canvas.getContext("2d"); 7 context.fillStyle="#eeeeff"; //fillStyle：填充的樣式，在該屬性中填入填充的顏色。 8 context.fillRect(0,0,400,300); //fillRect方法，填充矩形。 9 context.fillStyle="red"; 10 context.strokeStyle="bule"; //strokeStyle:圖形邊框的樣式，邊框的顏色。 11 context.lineWidth=1; //線寬。 12 context.fillRect(50,50,100,100); 13 context.strokeRect(50,50,100,100); //strokeRect：繪製矩形邊框。 14 context.clearRect(60,60,50,50); //clearRect：將指定的矩形區域中的圖形擦除，變為透明。 15 }
如上程式，使用canvas和Javascript腳本繪製矩形，步驟如下：
（1）取得canvas元素，用document.getElementById等方法取得canvas對象。
（2）取得上下文（context）
進行圖形繪製時，需要使用到圖形上下文，圖形上下文是一個封裝了很多繪圖功能的對象。需要使用canvas對象的getContext方法獲取圖形的上下文。在draw函數中，將參數設置為2d。
（3）填充和繪製邊框。
（4）使用fillStyle和strokeStyle設定圖形和邊框的樣式。
（5）使用fillRect和strokeRect方法繪製矩形和邊框。
註：
context.fillRect（x,y,width,height）
context.strokeRect（x,y,width,height）
context.clearRect （x,y,width,height） 三個方法的參數是一樣的，x是指矩形起點的橫坐標，y是指矩形起點的縱坐標，坐標原點為canvas畫布的最左上角，width是指矩形的長度，height是指矩形的高度——通過這4個參數，矩形的大小可以同時確定。
