canvas标签学习之线条样式

最新推荐文章于 2024-08-14 05:19:50 发布

linxiaoduo

最新推荐文章于 2024-08-14 05:19:50 发布

阅读量647

点赞数

本文链接：https://blog.csdn.net/linxiaoduo/article/details/80801658

版权

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 属性设置或返回所创建边角的类型，当两条线交汇时