📌  相关文章
📜  HTML | canvas miterLimit 属性(1)

📅  最后修改于: 2023-12-03 15:15:34.795000             🧑  作者: Mango

HTML | canvas miterLimit 属性

简介

在HTML的canvas元素中，miterLimit属性控制了两条线相交时尖角的长度，它只有在lineJoin值为'miter'时才有效。

语法
ctx.miterLimit = limit;
  • limit: 非负数，表示最长允许的尖角长度，超过该限制会被斜接（beveled）代替。
示例

以下代码显示了默认的miterLimit和修改后的miterLimit的效果：

<!DOCTYPE html>
<html>
<head>
	<title>Miter Limit</title>
	<style type="text/css">
		canvas { border: 1px solid black; }
	</style>
</head>
<body>
	<canvas id="myCanvas" width="200" height="200"></canvas>
	<script type="text/javascript">
		var canvas = document.getElementById('myCanvas');
		var ctx = canvas.getContext('2d');
		
		ctx.lineWidth = 10;
		ctx.lineJoin = 'miter';

		// 默认的miterLimit
		ctx.beginPath();
		ctx.moveTo(50, 50);
		ctx.lineTo(100, 100);
		ctx.lineTo(50, 150);
		ctx.stroke();

		// 修改后的miterLimit
		ctx.miterLimit = 2;
		ctx.beginPath();
		ctx.moveTo(100, 50);
		ctx.lineTo(150, 100);
		ctx.lineTo(100, 150);
		ctx.stroke();

	</script>
</body>
</html>

效果如下图所示：

miterLimit演示效果图

总结
  • miterLimit属性只在lineJoin值为'miter'时有效；
  • 修改miterLimit的值可以控制尖角的长度，超过该长度限制则会被斜接（beveled）代替；
  • 默认的miterLimit值为10。