canvas （smile）

今天我在學習html5新增加的標籤——canvas 畫布，他像所有的dom對象一樣它有自己本身的屬性、方法和事件，其中就有繪圖的方法，js能夠調用它來進行繪圖 ，最近在研讀《html5與css3權威指南》下面對其中最好玩的canvas的學習做下讀書筆記與實驗。

    context:一直覺得這個翻譯成“上下文”真夠蛋疼的，context是一個封裝了很多繪圖功能的對象，獲取這個對象的方法是  

        var context =canvas.getContext("2d");

    canvas元素繪製圖像的時候有兩種方法，分別是

        context.fill()//填充

        context.stroke()//繪製邊框

    style:在進行圖形繪製前，要設置好繪圖的樣式

        context.fillStyle//填充的樣式

        context.strokeStyle//邊框樣式

        context.lineWidth//圖形邊框寬度

    顏色的表示方式:

         直接用顏色名稱:"red" "green" "blue"

         十六進制顏色值: "#EEEEFF"

         rgb(1-255,1-255,1-255)

         rgba(1-255,1-255,1-255,透明度)

     繪製矩形  context.fillRect(x,y,width,height)  strokeRect(x,y,width,height)

     清除矩形區域 context.clearRect(x,y,width,height)

     圓弧context.arc(x, y, radius, starAngle,endAngle, anticlockwise)

     路徑  context.beginPath()    context.closePath()

---

    細心的朋友會發現上面的畫圓並不單單是直接用arc還用到了context的 beginPath   和closePath方法

    繪製線段 context.moveTo(x,y)  context.lineTo(x,y)

    繪製貝塞爾曲線（貝濟埃、bezier） context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) 

    繪製二次樣條曲線 context.quadraticCurveTo(qcpx,qcpy,qx,qy)

    線性漸變 var lg= context.createLinearGradient(xStart,yStart,xEnd,yEnd)

    線性漸變顏色lg.addColorStop(offset,color)

    canvas 還有一些其他的方法，我就不一一例舉出來咯

   下面是我用canvas寫的一個canvas小例子，比較簡單

   如果要寫一些複雜一點的效果，js是功底一定要深厚。

html代碼：

<canvas id="canvas" width='400' height="300">你的瀏覽器不支持canvas</canvas>

js代碼：

function drawRadian(){
       var context = document.getElementById('canvas').getContext('2d');
       context.beginPath();
       context.strokeStyle = "rgb(0,0,0)";
       context.arc(100,100,100,0,2*Math.PI,true);
       context.closePath();
       context.fillStyle = 'rgb(244,86,86)';
       context.fill();    
       
       context.beginPath();
       context.arc(50,75,25,0,2*Math.PI,true);
       context.fillStyle = 'rgb(0,0,0)';
       context.fill();
       
       context.beginPath();
       context.arc(150,75,25,0,2*Math.PI,true);
       context.fillStyle = 'rgb(0,0,0)';
       context.fill();
       
       context.beginPath();
       context.arc(150,75,25,0,2*Math.PI,true);
       context.fillStyle = 'rgb(0,0,0)';
       context.fill();
       
       context.beginPath();
       context.arc(100,125,10,0,2*Math.PI,true);
       context.fillStyle = 'rgb(0,0,0)';
       context.fill();
       
       context.beginPath();
       context.strokeStyle = "rgb(0,0,0)";
       context.lineWidth = 5;
       context.arc(100,150,25,Math.PI/6,5*Math.PI/6,false);
       
       context.stroke();
       
}  

效果圖：

                                                                                           

希望對小夥伴的你有所幫助，如果其中有什麼不妥當的地方，請多多指出，在這裏真誠的感謝你！