canvas lineCap 屬性

admin發表於2018-11-05
Canvas

此屬性用來設定直線兩端的型別，平直型別、新增圓形或者方形線帽。

預設情況，直線的兩端是平直型別的。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
context.lineCap="butt|round|square";

引數解析：

（1）.butt：預設值，直線兩端是平直的。

（2）.round：直線的兩端新增圓形的線帽。

（3）.square：直線的兩端新增正方形的線帽。

僅通過概念闡述難以完全理解屬性的作用，後面會通過程式碼例項詳細演示。

瀏覽器相容:

（1）.IE9+瀏覽器支援此屬性。

（2）.edge瀏覽器支援此屬性。

（3）.谷歌瀏覽器支援此屬性。

（4）.火狐瀏覽器支援此屬性。

（5）.Opera瀏覽器支援此屬性。

（6）.Safari瀏覽器支援此屬性。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>
<script>
window.onload=function(){
  let canvas=document.getElementById("ant");
  let ctx=canvas.getContext("2d");
  
  ctx.beginPath();
  ctx.lineWidth=10;
  ctx.lineCap="butt";
  ctx.moveTo(20,20);
  ctx.lineTo(200,20);
  ctx.stroke();
}
</script>
</head>
<body>
<canvas id="ant"></canvas>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/05/101210uw81w1968o6e4wos.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

butt是屬性的預設值，直線兩端是最為常見的平直狀。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>
<script>
window.onload=function(){
  let canvas=document.getElementById("ant");
  let ctx=canvas.getContext("2d");
  
  ctx.beginPath();
  ctx.lineWidth=10;
  ctx.lineCap="round";
  ctx.moveTo(20,20);
  ctx.lineTo(200,20);
  ctx.stroke();
}
</script>
</head>
<body>
<canvas id="ant"></canvas>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/05/101239maaifr8845d2tftd.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

將屬性值設定為round之後，直線的兩端變成了圓形。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>
<script>
window.onload=function(){
  let canvas=document.getElementById("ant");
  let ctx=canvas.getContext("2d");
  
  ctx.beginPath();
  ctx.lineWidth=10;
  ctx.lineCap="square";
  ctx.moveTo(20,20);
  ctx.lineTo(200,20);
  ctx.stroke();
}
</script>
</head>
<body>
<canvas id="ant"></canvas>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/05/101309q1ueutxsyzv25yvn.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

當將屬性值設定為square之後，貌似沒有發生什麼變化。

與預設情況完全一致，兩端依然是平直的，其實這是一種錯覺。

回顧一下屬性值的定義，square的功能是在直線的兩端新增正方形的線帽。

重點是"新增正方形的線帽"，而不是"修改成正方形的線帽"，直線的尺寸增加了。

對於屬性值round也是同樣的道理，直線的總體尺寸也會增加。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>
<script>
window.onload=function(){
  let canvas=document.getElementById("ant");
  let ctx=canvas.getContext("2d");
  
  ctx.beginPath();
  ctx.lineWidth=10;
  ctx.lineCap="butt";
  ctx.moveTo(20,20);
  ctx.lineTo(200,20);
  ctx.stroke();
  
  ctx.beginPath();
  ctx.lineCap="round";
  ctx.moveTo(20,40);
  ctx.lineTo(200,40);
  ctx.stroke();
  
  ctx.beginPath();
  ctx.lineCap="square";
  ctx.moveTo(20,60);
  ctx.lineTo(200,60);
  ctx.stroke();
}
</script>
</head>
<body>
<canvas id="ant"></canvas>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/05/101343isfppcghgqzhvv7n.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

三個屬性值的效果放在一起對比，就更加清晰了。

後兩會原來直線基礎上新增了圓形線帽或者方形線帽。

相關文章