返回到：Canvas API：CanvasRenderingContext2D
CanvasRenderingContext2D.miterLimit 是 Canvas 2D API 设置斜接面限制比例的属性。当获取属性值时，会返回当前的值（默认值是10.0 ）。当给属性赋值时，0、负数、 Infinity 和 NaN 都会被忽略；除此之外都会被赋予一个新值。
语法
ctx.miterLimit = value;选项
value
斜接面限制比例的的数字。0、负数、Infinity 和 NaN 都会被忽略。
简释
ctx.lineJoin = "miter" // "miter" > "round" ) "bevel" ]只有当 lineJoin 显示为 “>” 时，miterLimit 才有效。边角的角度越小，斜接长度就会越大。为了避免斜接长度过长，我们可以使用 miterLimit 属性。如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 ” ] ” 类型来显示
示例
使用 miterLimit 属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用样式和颜色 | Web176教程www.web176.com</title>
<meta name="robots" content="noindex, nofollow">
<style>
body {
padding: 0;
margin: 0;
}
svg:not(:root) {
display: block;
}
.playable-code {
background-color: #f4f7f8;
border: none;
border-left: 6px solid #558abb;
border-width: medium medium medium 6px;
color: #4d4e53;
height: 100px;
width: 90%;
padding: 10px 10px 0;
}
.playable-canvas {
border: 1px solid #4d4e53;
border-radius: 2px;
}
.playable-buttons {
text-align: right;
width: 90%;
padding: 5px 10px 5px 26px;
}
</style>
</head>
<body>
<table>
<tr>
<td><canvas id="canvas" width="150" height="150"></canvas></td>
<td>在输入框中输入<code>miterLimit</code>的值，并点击重绘按钮查看效果。<br><br>
<form onsubmit="return draw();">
<label>Miter limit</label>
<input type="number" size="3" id="miterLimit"/>
<input type="submit" value="重绘"/>
</form>
</td>
</tr>
</table>
<script>
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
// 清空画布
ctx.clearRect(0, 0, 150, 150);
// 绘制参考线
ctx.strokeStyle = '#09f';
ctx.lineWidth = 2;
ctx.strokeRect(-5, 50, 160, 50);
// 设置线条样式
ctx.strokeStyle = '#000';
ctx.lineWidth = 10;
// 检查输入
if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) {
ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value);
} else {
alert('Value must be a positive number');
}
// 绘制线条
ctx.beginPath();
ctx.moveTo(0, 100);
for (i = 0; i < 24 ; i++) {
var dy = i % 2 == 0 ? 25 : -25;
ctx.lineTo(Math.pow(i, 1.5) * 2, 75 + dy);
}
ctx.stroke();
return false;
}
document.getElementById('miterLimit').value = document.getElementById('canvas').getContext('2d').miterLimit;
draw();
</script>
</body>
</html>返回到：Canvas API：CanvasRenderingContext2D
作者：terry，如若转载，请注明出处：https://www.web176.com/canvas_api/7938.html
支付宝 
微信 