我們在第三節(jié)中描述了線段的繪制,其中線段的屬性lineWidth是用來改變線段的寬度。讓我們來回憶下線寬的用法

大數(shù)據(jù)培訓(xùn),云培訓(xùn),數(shù)據(jù)挖掘培訓(xùn),云計算培訓(xùn),高端軟件開發(fā)培訓(xùn),項目經(jīng)理培訓(xùn)

function drawLine(){
    cxt.lineWidth = 3;
    cxt.moveTo(10, 10);
    cxt.lineTo(120, 100);
    cxt.stroke();
}

大數(shù)據(jù)培訓(xùn),云培訓(xùn),數(shù)據(jù)挖掘培訓(xùn),云計算培訓(xùn),高端軟件開發(fā)培訓(xùn),項目經(jīng)理培訓(xùn)

上面的代碼我們就可以繪制一條寬度為3像素的線段。

上一章我們還提到線寬與像素邊界的內(nèi)容主要為: 
如果你在某2個像素的邊界處繪制一條1像素寬的線段,那么該線段實際會占據(jù)2個像素的寬度;

因為當(dāng)你在像素邊界處繪制一條1像素寬度的垂直線段時,canvas的繪圖環(huán)境對象會試著將半個像素畫在邊界中線的右邊,將另外半個像素畫在邊界中線的左邊。

然而,在一個整像素的范圍內(nèi)繪制半個像素寬的線段是不可能的,所以在左右兩個方向上的半個像素都被擴展為1個像素。(具體內(nèi)容可參考第三章內(nèi)容);

今天這章內(nèi)容我們用來看看線段的其它屬性 lineCap,lineJoin。

 

線段的端點(lineCap)

網(wǎng)友評論