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();