canvas lineJoin 屬性

admin發表於2018-11-08
Canvas

線與線之間可能有交匯的時候。

交匯之處，有可能圓潤，也有可能尖銳。

通過lineJoin屬性可以設定或者返回兩線交匯處的型別。

此屬性的名稱也從側面體現了它的功能，line具有線的意思，join具有交匯的意思。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
context.lineJoin="bevel|round|miter";

引數解析：

（1）.miter：預設值，說明交匯處為尖角。

（2）.round：說明交匯處為圓角。

（3）.bevel：說明交匯處為斜角。

瀏覽器相容：

（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.lineJoin="round";
  ctx.moveTo(20,20);
  ctx.lineTo(100,50);
  ctx.lineTo(20,100);
  ctx.stroke();
}
</script>
</head>
<body>
<canvas id="ant"></canvas>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201811/08/122208txk9r9u4i8p43ubb.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

round具有圓角或者圓弧的意思。

將lineJoin設定為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.lineJoin="bevel";
  ctx.moveTo(20,20);
  ctx.lineTo(100,50);
  ctx.lineTo(20,100);
  ctx.stroke();
}
</script>
</head>
<body>
<canvas id="ant"></canvas>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201811/08/122245tlqkxfevf4olx7xa.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

將lineJoin屬性值設定為bevel，兩條線的交匯處所形成的尖角被切去了一塊。

[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.lineJoin="miter";
  ctx.moveTo(20,20);
  ctx.lineTo(100,50);
  ctx.lineTo(20,100);
  ctx.stroke();
}
</script>
</head>
<body>
<canvas id="ant"></canvas>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201811/08/122319dz1ob7c73qbopopz.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

將lineJoin屬性值設定為miter，可以使直線交匯處呈現尖角效果。

miter是lineJoin的預設值，它受到miterLimit屬性的影響，看如下程式碼例項：

看一段程式碼例項：

[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.miterLimit=2;
  ctx.lineJoin="miter";
  ctx.moveTo(20,20);
  ctx.lineTo(100,50);
  ctx.lineTo(20,100);
  ctx.stroke();
}
</script>
</head>
<body>
<canvas id="ant" width="500" height="400"></canvas>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201811/08/122356kkgkcfjzvh8ilz99.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以看到箭頭處受到了影響，與將屬性值設定為"bevel"效果完全一致。

不同的是利用miterLimit設定更加靈活，可以自行調整被切掉的尺寸。

首先看一個圖示：

a:3:{s:3:\"pic\";s:43:\"portal/201811/08/122425ik1gmgr4beb9m8kb.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

miterLimit屬性用來定義內側角與外側角之間的水平距離。

如果miterLimit屬性規定的尺寸，小於繪製尖角的預設尺寸，將超出的尺寸切掉。

特別說明：miterLimit屬性僅對lineJoin屬性值為miter時有效。

具體參閱canvas miterLimit 屬性一章節。

[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("canvas");
  let ctx = canvas.getContext("2d");
  ctx.lineWidth=10;
  ctx.lineJoin="round";
  ctx.strokeRect(10,10,100,100);
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201811/08/122506v5pggmwv52tpzbtr.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼繪製了一個圓角矩形效果。

相關文章