html5 提供了很多很強大的功能，有些功能甚至可以擺脫伺服器的限制，減少對伺服器的訪問。canvas就是一個html5 新增的強大標籤。雖然功能有待完善，但已然可以解決一些網頁問題。

      今天主要講canvas的網頁繪製圖像的功能，它有點像VC的windows API。

         在html中新增如下

        <canvas id="my" width="200" height="100">您的瀏覽器版本過低</canvas>

        var c=document.getElementById("my");//尋找canvas物件

         //繪畫矩形

        context.fillStyle="#ccc";// 填充色，對閉合圖形起作用

        context.fillRect(0,0,150,75);//前兩個引數為左上方座標，後兩個為右下方

        //繪畫直線

        context.strokeStyle="#000";//畫筆顏色

        context.lineWidth=2;//畫筆粗細,注意：沒有單位

        context.beginPath();//開始劃線

        context.moveTo(20,0);//起點

        context.stroke();//結束劃線

       //繪畫折線圖案

        context.fillStyle="#ccc";// 填充色，對閉合圖形起作用

        context.strokeStyle="#000";//畫筆顏色

        context.lineWidth=2;//畫筆粗細,注意：沒有單位

        context.beginPath();//開始劃線

        context.moveTo(20,0);//起點

        context.lineTo(20,40);//終點

       context.fill();//自動連線頭尾，並用填充色填充閉合圖形

        context.closePath();//結束路徑

        //新增文字

       context.font="italic bold 24px serif";//設定文字的風格，[font style] [font weight] [font size] [font face]四個引數

        context.fillText("文字",10,20);//新增文字，後兩個表示開始新增的位置

      //漸變效果

        var gradient=context.createLinearGradient(0,0,0,40);//前兩個引數為漸變開始的橫縱座標，後兩個為漸變結束點的橫縱座標
        gradient.addColorStop(0,"color1");//起始顏色
        gradient.addColorStop(1,"color2");//終止顏色
        context.fillStyle=gradient;
        context.strokeStyle=gradient;

 </script>