我們?cè)诘谌?jié)中描述了線段的繪制,其中線段的屬性lineWidth是用來改變線段的寬度。讓我們來回憶下線寬的用法
function drawLine(){ cxt.lineWidth = 3; cxt.moveTo(10, 10); cxt.lineTo(120, 100); cxt.stroke(); }
上面的代碼我們就可以繪制一條寬度為3像素的線段。
上一章我們還提到線寬與像素邊界的內(nèi)容主要為:
如果你在某2個(gè)像素的邊界處繪制一條1像素寬的線段,那么該線段實(shí)際會(huì)占據(jù)2個(gè)像素的寬度;
因?yàn)楫?dāng)你在像素邊界處繪制一條1像素寬度的垂直線段時(shí),canvas的繪圖環(huán)境對(duì)象會(huì)試著將半個(gè)像素畫在邊界中線的右邊,將另外半個(gè)像素畫在邊界中線的左邊。
然而,在一個(gè)整像素的范圍內(nèi)繪制半個(gè)像素寬的線段是不可能的,所以在左右兩個(gè)方向上的半個(gè)像素都被擴(kuò)展為1個(gè)像素。(具體內(nèi)容可參考第三章內(nèi)容);
今天這章內(nèi)容我們用來看看線段的其它屬性 lineCap,lineJoin。
線段的端點(diǎn)(lineCap)