canvas标签学习之线条样式

1.lineCap属性

lineCap 属性设置或返回线条末端线帽的样式。

<body>
	<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
		Your browser does not support the HTML5 canvas tag.
	</canvas>
	
	<script type="text/javascript">
		var c = document.getElementById('myCanvas');//获取canvas标签
		var ctx = c.getContext('2d');//获得context对象
		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>
</body>

值	描述
butt	默认。向线条的每个末端添加平直的边缘。
round	向线条的每个末端添加圆形线帽。
square	向线条的每个末端添加正方形线帽。

2.lineJoin属性

<body>
	<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
		Your browser does not support the HTML5 canvas tag.
	</canvas>
	
	<script type="text/javascript">
		var c = document.getElementById('myCanvas');//获取canvas标签
		var ctx = c.getContext('2d');//获得context对象
		ctx.beginPath();
		ctx.lineWidth = 10;
		ctx.lineJoin = "round";
		ctx.moveTo(20,20);
		ctx.lineTo(100,50);
		ctx.lineTo(20,100);
		ctx.stroke();
		
	</script>
</body>

lineJoin 属性设置或返回所创建边角的类型，当两条线交汇时

值	描述
bevel	创建斜角。
round	创建圆角。
miter	默认。创建尖角。

3.lineWidth属性

lineWidth 属性设置或返回当前线条的宽度，以像素计。

context.lineWidth=number;

4.miterLimit属性

miterLimit 属性设置或返回最大斜接长度。

斜接长度指的是在两条线交汇处内角和外角之间的距离。

提示：只有当 lineJoin 属性为 "miter" 时，miterLimit 才有效。

边角的角度越小，斜接长度就会越大。

为了避免斜接长度过长，我们可以使用 miterLimit 属性。

如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 类型来显示（图解 3）：

值	描述
number	正数。规定最大斜接长度。如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 类型来显示。

值

描述

number

正数。规定最大斜接长度。

如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 类型来显示。

canvas标签学习之线条样式

猜你喜欢