線的樣式在canvas中分為輪廓顏色、以及線型的樣式
一困介、輪廓顏色
strokeStyle = color; // 設(shè)置描邊輪廓的顏色
二顶滩、線型樣式
1敛滋、線的寬度
lineWidth = number;
2、線帽的樣式
ctx.lineCap = 'butt'; // 默認(rèn) 正常
屬性值:
round: 多出半圓
square: 多出方形
ctx.lineWidth = 20;
ctx.strokeStyle = 'red';
// 線帽： 線的兩端的樣式
// butt
ctx.beginPath();
ctx.lineCap = 'butt'; // 默認(rèn)
ctx.moveTo(50, 100);
ctx.lineTo(50, 400);
ctx.stroke();
// round：會(huì)多出半圓
ctx.beginPath();
ctx.lineCap = 'round';
ctx.moveTo(150, 100);
ctx.lineTo(150, 400);
ctx.stroke();
// square: 會(huì)多出方形
ctx.beginPath();
ctx.lineCap = 'square';
ctx.moveTo(250, 100);
ctx.lineTo(250, 400);
ctx.stroke();
// 黃色的線
ctx.lineWidth = 2;
ctx.strokeStyle = 'yellow';
ctx.beginPath();
ctx.moveTo(0, 100);
ctx.lineTo(400, 100);
ctx.moveTo(0, 400);
ctx.lineTo(400, 400);
ctx.stroke();
線帽效果圖：
image.png
利用多出一點(diǎn)點(diǎn)的特性我們可以看看在閉合路徑時(shí)可以做點(diǎn)什么
栗子： 來(lái)個(gè)箭頭
// 箭頭
ctx.beginPath();
ctx.lineWidth = 6;
ctx.strokeStyle = 'blue';
線帽使用的是***
ctx.lineCap = 'square';
// 起始點(diǎn)
ctx.moveTo(100, 200);
ctx.lineTo(250, 200);
ctx.lineTo(250, 150);
// 角>
ctx.lineTo(350, 250);
ctx.lineTo(250, 350);
ctx.lineTo(250, 300);
// 結(jié)束點(diǎn)
ctx.lineTo(100, 300);
ctx.stroke();
當(dāng)前效果：
image.png
問(wèn)題來(lái)了： 箭頭為什么沒(méi)有閉合路徑替废，如何閉合路徑
// 第一種 添加最后一個(gè)結(jié)束點(diǎn)
ctx.lineTo(100, 200);
ctx.stroke();
// 第二種 閉合路徑
ctx.closePath();
ctx.stroke();
此時(shí)我們使用的線帽為square：以上兩種方法箍铭，閉合路徑后完美連接在一起
image.png
如果是默認(rèn)線帽butt呢?
1、在使用closePath()方式閉合是完美連接在一起的(我就不貼圖了)
2椎镣、使用lineTo()诈火，出現(xiàn)了問(wèn)題：缺了一小塊
image.png
看過(guò)效果之后，不想自己驗(yàn)證一下嗎状答？
三冷守、線的交點(diǎn)
ctx.lineJoin = 'miter '; // 默認(rèn) 尖角
設(shè)置內(nèi)角與外角距離
ctx.miterLimit = 10; 默認(rèn)值（
當(dāng)使用miter作為線條的連接時(shí)，所產(chǎn)生的內(nèi)角與外角最大的默認(rèn)值惊科，一旦超過(guò)默認(rèn)值拍摇，就會(huì)變成bevel
圖片來(lái)源于： 菜鳥(niǎo)教程
內(nèi)角與外角的距離
內(nèi)角與外角距離超過(guò)默認(rèn)值，變成bevel
image.png
ctx.lineJoin = 'bevel'; // 斜接
image.png
ctx.lineJoin = 'round'; // 圓角
image.png
