首頁  >  文章  >  web前端  >  canvas中線段的端點與連接點詳解

canvas中線段的端點與連接點詳解

零下一度
零下一度原創
2017-07-18 09:35:442127瀏覽

        在Canvas中,線段也是路徑中的一種,稱為線性路徑。在Canvas中繪製線性路徑主要用到moveTo(x,y)、lineTo(x,y)和stroke()幾個方法,讓我們來回想下線寬的用法。

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

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

上一章我們也提到線寬與像素邊界的內容主要為:
如果你在某2個像素的邊界處繪製一條1像素寬的線段,那麼該線段實際上會佔據2個像素的寬度;

#因為當你在像素邊界處繪製一條1像素寬度的垂直線段時,canvas的繪圖環境物件會試著將半個像素畫在邊界中線的右邊,將另外半個像素畫在邊界中線的左邊。

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

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

 線段的端點(lineCap)

#在繪製線段時,你可以控制線段的端點,也就是「線帽」(lineCap )的樣子,在Canvas的繪圖環境物件中,控制線段端點的屬性剛好也叫作lineCap。
線段端點的樣式有三個值,分別是butt, roundm, square, 預設是為butt; round與square 都會為線段的端點畫上一頂帽子。

  • butt:線段端點的預設樣式

  • round:在端點處新增一個半圓,其半徑為線寬的一半。

  • square: 在端點處新增一個矩形,長度與線寬一致,寬度是線寬的一半。

看到這裡看起來像我們也看不出什麼名堂。那我們就先畫出來,你就會瞬間明白了。要不怎麼都說要資料視覺化呢!

function lineCap(){
    cxt.lineWidth = 20;
    cxt.strokeStyle = '#16a085';

    cxt.beginPath();
    cxt.lineCap = 'butt';
    cxt.moveTo(20, 20);
    cxt.lineTo(300, 20);
    cxt.stroke();

    cxt.beginPath();
    cxt.lineCap = 'round';
    cxt.moveTo(20, 100);
    cxt.lineTo(300, 100);
    cxt.stroke();

    cxt.beginPath();
    cxt.lineCap = 'square';
    cxt.moveTo(20, 180);
    cxt.lineTo(300, 180);
    cxt.stroke();
}

 

看到上面的圖片是不是瞬間就知道了lineCap的屬性值的樣式,是不是也感受到了可視化的魅力。

 

線段的連接點(lineJoin)

 

在繪製線段或矩形時,我們可以控制兩條線段連接處的拐點,也就是線段的連接點。
在canvas繪圖環境中線段的連接點是由 lineJoin屬性控制的。
lineJoin屬性也有三個值分別為: round, bevel, miter,預設是miter。

  • round:額外填滿一個圓弧,圓弧為兩條線段角落的外緣的點用圓弧連接而成,

  • bevel:額外填滿一個三角形,三角形為兩條線段角落的外緣的點用直線連接而成。

  • miter:額外填滿一個多邊形,多邊形為兩條線段角落外緣的延長線的交點形成。

 

同樣我們繪製出來來看

function lineCap(){
    cxt.lineWidth = 20;
    cxt.strokeStyle = '#16a085';

    cxt.beginPath();
    cxt.lineJoin = 'round';
    cxt.moveTo(20, 20);
    cxt.lineTo(300, 20);
    cxt.lineTo(300, 60);
    cxt.stroke();

    cxt.beginPath();
    cxt.lineJoin = 'bevel';
    cxt.moveTo(20, 100);
    cxt.lineTo(300, 100);
    cxt.lineTo(300, 140);
    cxt.stroke();

    cxt.beginPath();
    cxt.lineJoin = 'miter';
    cxt.moveTo(20, 180);
    cxt.lineTo(300, 180);
    cxt.lineTo(300, 220);
    cxt.stroke();
}

我們再來看看線段連接點的具體建構方式

 

提示

#當我們使用miter樣式來繪製線段的連接點時,我們也可以指定一個miterLimit屬性
miterLimit: 表示斜接線(miter)的長度與二分之一線寬的比值;

斜接線的計量方式如下圖

#從圖中我們可以看出,如果兩個線段的夾角很小的話,那麼斜接線的長度有可能會變的非常長,它與二分之一線寬的比值就會超出你所指定的miterLimit的屬性值,

這時候瀏覽器會將以bevel的方式來畫出線段的連接點。

 

總結

#Canvas繪圖環境中線段的相關屬性

##miterLimit 斜接線與二分之一線寬的比值#非零的正數#10
屬性 描述 預設值
lineWidth 以像素為單位的線段寬度 #非零的正數 1
lineCap #繪製線段的端點樣式 butt,round ,square butt
#lineJoin ##線段連接點的樣式 bevel,round,miter miter

以上是canvas中線段的端點與連接點詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn