線條屬性概述
線條的屬性共有以下四個：
1寻歧、lineCap屬性
lineCap 定義上下文中線的端點麦萤，可以有以下 3 個值错森。
- butt：默認值俄讹，端點是垂直于線段邊緣的平直邊緣。
- round：端點是在線段邊緣處以線寬為直徑的半圓邑商。
- square：端點是在選段邊緣處以線寬為長摄咆、以一半線寬為寬的矩形。
2人断、 lineJoin屬性
lineJoin 定義兩條線相交產(chǎn)生的拐角吭从，可將其稱為連接。在連接處創(chuàng)建一個填充三角形恶迈，可以使用 lineJoin 設(shè)置它的基本屬性涩金。
- miter：默認值，在連接處邊緣延長相接。miterLimit 是角長和線寬所允許的最大比例(默認是 10)步做。
- bevel：連接處是一個對角線斜角副渴。
- round：連接處是一個圓。
3全度、線寬
lineWidth 定義線的寬度(默認值為 1.0)煮剧。
4、筆觸樣式
strokeStyle 定義線和形狀邊框的顏色和樣式将鸵。
后面兩個前面已經(jīng)說過了勉盅，這里我們著重來看看前兩個屬性。
線條的帽子lineCap
廢話不多說顶掉，直接上代碼看效果菇篡。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>線條的帽子</title>
</head>
<body>
<div id="canvas-warp">
<canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">
你的瀏覽器居然不支持Canvas？一喘！趕快換一個吧Ｇ埂！
</canvas>
</div>
<script>
window.onload = function(){
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 600;
var context = canvas.getContext("2d");
context.lineWidth = 50;
context.strokeStyle = "#1BAAAA";
context.beginPath();
context.moveTo(100,100);
context.lineTo(700,100);
context.lineCap = "butt";
context.stroke();
context.beginPath();
context.moveTo(100,300);
context.lineTo(700,300);
context.lineCap = "round";
context.stroke();
context.beginPath();
context.moveTo(100,500);
context.lineTo(700,500);
context.lineCap = "square";
context.stroke();
//下面畫兩個基準線方便觀察
context.lineWidth = 3;
context.strokeStyle = "black";
context.beginPath();
context.moveTo(100,0);
context.lineTo(100,600);
context.moveTo(700,0);
context.lineTo(700,600);
context.stroke();
}
</script>
</body>
</html>
運行結(jié)果：
這里我還做了兩條平行線做一下參考凸克，這樣一眼就能看清lineCap三個值的特點议蟆。但要注意，這個帽子只在線條的端點處起作用萎战，哪怕是折點很多的折線咐容，也僅僅是在開始和終止的兩個端點帶帽子。如果想改變線條折點(兩個線段的連接處)的樣式蚂维，那就要用到下面的lineJoin屬性戳粒。
線條的連接lineJoin
廢話不多說，直接上代碼看效果虫啥。這段代碼改自4-3蔚约，只是設(shè)置了一下連接的屬性。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>線條的連接</title>
</head>
<body>
<div id="canvas-warp">
<canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">
你的瀏覽器居然不支持Canvas涂籽？苹祟！趕快換一個吧！评雌！
</canvas>
</div>
<script>
window.onload = function(){
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 600;
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(100,100);
context.lineTo(300,300);
context.lineTo(100,500);
context.lineJoin = "miter";
context.lineWidth = 20;
context.strokeStyle = "red";
context.stroke();
context.beginPath();
context.moveTo(300,100);
context.lineTo(500,300);
context.lineTo(300,500);
context.lineJoin = "bevel";
context.lineWidth = 20;
context.strokeStyle = "blue";
context.stroke();
context.beginPath();
context.moveTo(500,100);
context.lineTo(700,300);
context.lineTo(500,500);
context.lineJoin = "round";
context.lineWidth = 20;
context.strokeStyle = "black";
context.stroke();
}
</script>
</body>
</html>
運行結(jié)果：
看不清的童鞋自己放大網(wǎng)頁或者自己將代碼的線寬調(diào)寬一點树枫。
這里有一個很隱蔽的屬性，就是當lineJoin設(shè)置為miter時（默認）景东，會解鎖一個成績砂轻，可以使用miterLimit屬性。
舉個例子看看斤吐。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>miterLimit</title>
</head>
<body>
<div id="canvas-warp">
<canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">
你的瀏覽器居然不支持Canvas搔涝？丝里！趕快換一個吧！体谒！
</canvas>
</div>
<script>
window.onload = function(){
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 600;
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(100,100);
context.lineTo(300,300);
context.lineTo(100,500);
context.lineJoin = "miter";
context.miterLimit = 10;
context.lineWidth = 5;
context.strokeStyle = "red";
context.stroke();
context.beginPath();
context.moveTo(300,200);
context.lineTo(500,300);
context.lineTo(300,400);
context.lineJoin = "miter";
context.miterLimit = 10;
context.lineWidth = 5;
context.strokeStyle = "blue";
context.stroke();
context.beginPath();
context.moveTo(500,290);
context.lineTo(700,300);
context.lineTo(500,310);
context.lineJoin = "miter";
context.miterLimit = 10;
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
}
</script>
</body>
</html>
運行結(jié)果：
會發(fā)現(xiàn)，這個miterLimit規(guī)定了一個自動填充連接點的極限值臼婆。如果超過了這個值抒痒，會導(dǎo)致lineJoin屬性失效，會從 miter 變成 bevel颁褂」氏欤可以看出來，這個值和線寬以及夾角有關(guān)颁独，具體是啥關(guān)系彩届。看下圖誓酒。
可以看到樟蠕，關(guān)系有點復(fù)雜。有興趣的小伙伴可以推導(dǎo)一下這個值與線寬靠柑、夾角的函數(shù)關(guān)系寨辩。其實，大多時候用不到這個隱藏屬性歼冰，即便用到了也是憑感覺寫個數(shù)然后不滿意再調(diào)試即可靡狞。
高級線段繪制舉例
實際在畫布上繪制線段時，會有一些奇怪的現(xiàn)象發(fā)生隔嫡，這里融合本節(jié)課學(xué)到的兩個線段的屬性講解一個甸怕。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>miterLimit</title>
</head>
<body>
<div id="canvas-warp">
<canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">
你的瀏覽器居然不支持Canvas？腮恩！趕快換一個吧Ｉ液肌！
</canvas>
</div>
<script>
window.onload = function(){
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 600;
var context = canvas.getContext("2d");
// 實例1: 圓形端點,斜角連接,在畫布左上角
context.beginPath();
context.moveTo(0,0);
context.lineTo(180,0);
context.lineTo(180,180);
context.lineJoin = 'bevel';
context.lineCap = 'round';
context.lineWidth = 10;
context.strokeStyle = "red";
context.stroke();
// 實例2: 圓形端點,斜角連接,不在畫布左上角
context.beginPath();
context.moveTo(300,200);
context.lineTo(480,200);
context.lineTo(480,380);
context.lineJoin = 'bevel';
context.lineCap = 'round';
context.lineWidth = 10;
context.strokeStyle = "blue";
context.stroke();
// 實例3: 平直端點,圓形連接,不在畫布左上角
context.beginPath();
context.moveTo(600,400);
context.lineTo(780,400);
context.lineTo(780,580);
context.lineJoin = 'round';
context.lineCap = 'butt';
context.lineWidth = 10;
context.strokeStyle = "black";
context.stroke();
}
</script>
</body>
</html>
運行結(jié)果：
這 3 個線段和連接的實例有助于說明在畫布上繪制線段時不同屬性的組合秸滴。
實例 1 嘗試從畫布左上角開始繪制式曲，結(jié)果發(fā)生了一個奇怪的現(xiàn)象。Canvas 路徑在 x 軸和 y 軸方向上都繪制到了起點的外側(cè)缸榛。由于這個原因?qū)嵗?1 上面的線看起來要細些吝羞。另外，左上角水平部分中圓形端點也無法看到内颗，它們都被繪制到了屏幕之外的負值坐標區(qū)域钧排。此外，lineJoin 定義的對角線斜角也沒有繪出均澳。
實例 2 調(diào)整了例子 1 中出現(xiàn)的問題,將起始點離開左上角恨溜。這樣就繪制出了完整的水平線,并且圓形 lineCap 和斜角 lineJoin 都被繪制出來了符衔。
實例 3 顯示了去掉 lineCap 設(shè)置后的默認端點效果,并且將 lineJoin 調(diào)整為圓角。
至此糟袁，線條的所有內(nèi)容我們已經(jīng)說完了判族。這個看起來很簡單的一個線條，原來還有這么多內(nèi)容项戴！藝術(shù)家可不是那么好當?shù)男伟铮贿^想必也激發(fā)了童鞋們的求知欲。Canvas究竟有多少內(nèi)容等待著我們?nèi)グl(fā)現(xiàn)周叮？這是一個開始辩撑，讓我們繼續(xù)前行！??
如果您喜歡本書仿耽，請使用支付寶掃描下面的二維碼捐助作者合冀。
謝謝您的支持！也歡迎您訂閱本書项贺。
如果書中有疏漏或錯誤之處君躺，敬請您指出，期待您的pull request开缎。如果有任何疑問也可以發(fā)送issue晰洒。
本人郵箱：airing@ursb.me
本人博客：http://ursb.me
本書地址：http://airingursb.gitbooks.io/canvas
本書github：http://github.com/airingursb/canvas
