canvas miterLimit 屬性

admin發表於2018-11-05
CanvasMIT

miterLimit屬性可以設定或者返回最大斜接長度，預設值為10.0。

上面是當前絕大多數canvas教程對於此屬性的闡述。

可以很負責任的說，上述闡述並不完全正確，甚至可以說是錯誤的，本文將做一下糾正。

看如下圖示：

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

miterLimit屬性就是用來設定或者返回內角與外角之間的可允許的最大距離。

但是需要注意如下兩點：

（1）.此屬性僅對lineJoin屬性值為"miter"時有效。

（2）.為miterLimit屬性設定的值或者返回的值並不是內角與外角的絕對值，而是一個比率。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
context.miterLimit=number

引數解析：

（1）.number：一個數字，設定最大斜接的長度的比率。

既然是比率，必然有一個參考值，答案就是以lineWidth屬性值為參考。

關於lineWidth具體用法可以參閱canvas lineWidth繪製原理一章節。

瀏覽器相容：

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

上述程式碼並沒有顯式設定miterLimit屬性值，預設為10。

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

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

當miterLimit屬性值為10的時候，尖角可以完整的顯示。

現在問題來了，也是網上很多教程有誤的地方，很明顯內角與外角之間的水平距離已經超過10px。

但是為什麼還能完整顯示呢，這是因為miterLimit屬性值是一個比率，而不是絕對值。

是相對於lineWidth的比率，由此上述程式碼設定內角與外角之間所允許的最大尺寸是10x10=100px。

[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.miterLimit=2;
  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/05/111355ir0bqb56r2bo2j0m.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼將miterLimit屬性值修改2，那麼所允許的最大尺寸就是2x10=20px。

內角與外角之間的尺寸超出20px的部分將會被切去。

效果與lineJoin屬性值為bevel時的效果完全一致。

相關文章