canvas學習-----畫直線

畫布

　　1.添加canvas標籤  能夠經過CSS或者JS來設置canvs標籤的width,height;Ps:

<canvas id="cvs"></canvas>

　　2.Css設置canvs的width,height;

#cvs {
            position: absolute;
            top: 10px;
            left: 10px;
            width: 355px;
            height: 647px;
            border: 2px dashed green;
        }

　　3.經過JS設置width,height寬高

        var cvs = document.getElementById("cvs");
            cvs.width = 300;
            cvs.height = 500;

PS:經過JS和CSS 寬高的區別：

　　好比一塊寬1000的畫布，你在畫布左側畫了一條豎線，寬100像素。此時你把畫布自身的width設爲500，至關於把畫布的右半邊咔嚓掉了，但此時那豎線的寬度仍是100。但若是你經過CSS來把畫布的寬度變成500，那就至關於把畫布由1000擠壓到500，因此豎線的寬度變成了50.(這只是理論狀況，實際上設置canvas的寬度時，他會清空掉已畫出來的內容。。)Canvas自身的寬高就是畫布自己的屬性，而css給他的寬高則能夠看做是縮放，若是你縮放的太過隨意，那麼畫布上的圖形可能變得你本身都認不出來。因此有個建議：除非特殊狀況，必定不要用css來定義Canvas的寬高。

畫筆

var ctx = cvs.getContext('2d');

 

開始畫直線

　　經常使用API:　　

            //開始一條新路徑/首次畫能夠不寫
            ctx.beginPath();
            //設置畫筆的起始位置點
            ctx.moveTo(x,y);
            //設置畫筆移動的目的點
            ctx.lineTo(x,y);
            //設置畫筆的大小
            ctx.lineWidth = 10;
             //setLineDash([x,y]) 設置所畫的直線爲虛線，x爲線段距離，y表示線段的間隔,若是隻有隻有一個數 x=y;
            ctx.setLineDash([x,y]);
            //關閉路徑
            ctx.closePath();
            //設置畫筆描邊時的樣式
            ctx.strokeStyle = 'red';
            //設置畫筆開始描邊
            ctx.stroke();
            //設置畫筆填充時的樣式
            ctx.fillStyle = 'red';
            //設置畫筆開始填充
            ctx.fill();
　　　　　　　

/*
 說明：
    1.ctx.stroke(); 和 ctx.fill(); 是能夠同時使用的;樣式依然自己是不一樣的功能；
    2.lineJoin 和 lineCap 區別：lineCap 是設置畫筆自己末端的樣式；而lineJoin是設置兩條相交直線，交匯點的樣式；須要注意；
 */

　　　　lineJoin屬性。lineJoin，意思即線的交匯處，有3個屬性：miter(默認，尖角)，bevel（斜角）,round（圓角），如圖6：

                   

　　　　lineCap屬性，這個就是定義線條的端點。lineCap有3個值：butt（平，默認）,round（圓）,square（方），如圖8

                    

實例

　　1.描邊

 

        var ctx = cvs.getContext('2d');
            ctx.moveTo(30,10);
            ctx.lineTo(200,10);
            ctx.lineTo(200,100);
            ctx.lineTo(30,100);
            ctx.closePath();
            ctx.stroke();

 

   　 2.使用填充

            ctx.beginPath();
            ctx.moveTo(30,150);
            ctx.lineTo(200,150);
            ctx.lineTo(200,250);
            ctx.lineTo(30,250);
            ctx.closePath();
            ctx.fillStyle = 'green';
            ctx.fill();

 

 

　　3. 設置虛線 setLineDash

 

            //開始一條新路徑,從新設置起始點
            ctx.beginPath();
            ctx.moveTo(30,310);
            ctx.lineTo(210,310);
            ctx.lineTo(210,410);
            ctx.lineTo(30,410);
            ctx.lineWidth = 10;
            //setLineDash([x,y]) 設置所畫的直線爲虛線，x爲線段距離，y表示線段的間隔,若是隻有隻有一個數 x=y;
            ctx.setLineDash([5]);
            ctx.strokeStyle = 'red';
            ctx.lineJoin = "round";
            ctx.closePath();
            ctx.stroke();

 　4.設置 lineJoin

        var ctx = cvs.getContext('2d');
            ctx.moveTo(30,10);
            ctx.lineTo(200,10);
            ctx.lineTo(200,100);
            ctx.lineTo(30,100);
            ctx.lineWidth = 10;
            ctx.strokeStyle = 'red';
            ctx.lineJoin = "round";
            ctx.closePath();
            ctx.stroke();