站長資訊網
        最全最豐富的資訊網站

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

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

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

        看到上面的圖片是不是瞬間就知道了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();  }

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

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

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

        提示

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

        斜接線的計量方式如下圖

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

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

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

        總結

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

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

        贊(0)
        分享到: 更多 (0)
        網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
        主站蜘蛛池模板: 亚洲精品国产日韩无码AV永久免费网 | 亚洲国产精品无码专区在线观看| 2022精品天堂在线视频| 日韩三级精品| 国产高清在线精品一区小说| 99精品热这里只有精品| 呦交小u女国产精品视频| 精品国产不卡一区二区三区| 亚洲精品综合一二三区在线| 91精品国产乱码久久久久久| 日韩av无码久久精品免费| 久久精品中文字幕第23页| 6080亚洲精品午夜福利| 91麻豆精品国产| 久久精品无码一区二区无码| 亚洲国产精品不卡毛片a在线| 国产精品免费一区二区三区| 四虎国产精品免费久久久| 国产精品无套内射迪丽热巴| 亚洲第一极品精品无码久久| 日韩美女18网站久久精品| 精品人妻少妇一区二区三区| 国产精品亚洲不卡一区二区三区| 亚洲愉拍自拍欧美精品| 欧美日韩在线亚洲国产精品| 99热国内精品| 91精品全国免费观看青青| 国产乱码精品一品二品| 色国产精品一区在线观看| 最新国产在线精品观看| 日产国产精品亚洲系列| 日本国产精品久久| 无码人妻一区二区三区精品视频| 久久精品国产亚洲精品| 久久国产精品波多野结衣AV| 精品欧美一区二区在线观看| 精品无码专区亚洲| 免费精品久久久久久中文字幕 | 亚洲精品一品区二品区三品区 | 国产亚州精品女人久久久久久| 99久久国产综合精品成人影院 |