convas的簡單瞭解

< canvas id="canvas"  height="300" width="300" >
    您的瀏覽器不支持canvas標籤
< / canvas >
canvas標籤在頁面中只顯示一個設定背景色的畫布，如果要產生新內容或
者進行畫圖操作，需要藉助canvas API(HTML5的內置對context 對象)和
javascript操作實現畫圖或者其他圖像操作

具體實例：
     
設置了繪圖環境才能對其操作，3d的要用另外的實現。
    畫線段:
           a, cxt.moveTo(20,20);//開始起點
           b, cxt.lineTo(100,20);//結束終點
           c, cxt.stroke();//正式畫
     總的就是分爲兩步：1，設計線段怎麼畫；2，畫

畫之前可以設置樣式（cxt.lineWidth=5;畫筆的粗細，多少px像素；cxt.strokeStyle="yellow";字體顏色fillStyle是填充顏色）
樣式是根據最近的一次畫筆設置決定的，空心和實心是分開的。

畫圓：
     cxt.arc(200,200,50,0,360,false);==>(橫座標，縱座標，半徑，圓起度數，圓終度數，順逆時針做畫)；
所有的路徑圖形，開始時：cxt.beginPath( );
每畫完要用封閉路徑：cxt.closePath( );

畫矩形：(矩形不算路徑圖形)
        cxt.strokeRect(300,150,100,100)；
        cxt.fillRect(300,390,100,100);//前面兩是起點座標，後面是長寬。
        也可分開畫：
               cxt.rect(300,270,100,100);
                cxt.fill();//但是分開的話，用fill就會把以前都填充了，所以要加cxt.beginPath();cxt.closePath();

寫字：
    cxt.font="40px 宋體";//css font屬性
    cxt.fillText("兄弟",20,300);
     cxt.strokeText("兄弟",20,350);

畫圖：//把一幅圖片畫到畫布中 注意webkit內核的瀏覽器 chrome和獵豹不支持
    var img =new Image();
    img.src="xiao.jpg";
    cxt.drawImage(img,20,370,230,306);

 畫三角形 ：//填充或者畫路徑要先關閉路徑再畫
    cxt.beginPath();
                //移動至開始點
                cxt.moveTo(300,500);
                cxt.lineTo(300,600);
                cxt.lineTo(400,550);
                cxt.closePath();
                cxt.stroke()；
旋轉圖片：
     a, 設置旋轉環境：cxt.save( );
     b, 在異次元空間重置0，0點的位置：cxt.translate(20,20);
     c, 圖片/形狀旋轉：cxt.rotate(30*Math.PI/180);//設置旋轉角度，參數是弧度（公式：角度*Math.PI/180）；
      d, 旋轉一個圖片：
                 var img=new Image( );
                 img.src="xiao.jpg";