HTML5学习第15篇——canvas之线条样式

最新推荐文章于 2025-05-19 15:50:27 发布

水晶果冻1125

最新推荐文章于 2025-05-19 15:50:27 发布

阅读量778

点赞数

CC 4.0 BY-SA版权

分类专栏： # HTML5 文章标签： canvas 线条 lineCap lineJoin

本文链接：https://blog.youkuaiyun.com/m0_37617778/article/details/84900459

HTML5 专栏收录该内容

20 篇文章

订阅专栏

canvas线条样式练习：

lineCap

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

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

提示："round" 和 "square" 会使线条略微变长。

lineJoin

设置或返回两条线相交时，所创建的拐角类型

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

示例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>canvas 线条显示</title>
	<style type="text/css">
		canvas{
			border:1px solid red;
		}
	</style>
</head>
<body>
	<canvas width="600" height="300"></canvas>
	<script type="text/javascript">
		var c = document.querySelector('canvas');
		var ctx = c.getContext("2d");

		//lineCap设置或返回线条末端线帽的样式。
		/*butt	默认。向线条的每个末端添加平直的边缘。
		  round	向线条的每个末端添加圆形线帽。
		  square向线条的每个末端添加正方形线帽。
		  提示："round" 和 "square" 会使线条略微变长。
		*/

		//lineJoin设置或返回两条线相交时，所创建的拐角类型
		/*
			bevel	创建斜角。
			round	创建圆角。
			miter	默认。创建尖角。
		*/

		//绘制第1个大于号图形 >
		ctx.moveTo(100,100);
		ctx.lineTo(200,150);
		ctx.lineTo(100,200);

		ctx.lineCap = "butt";//默认 平直的边缘
		ctx.lineJoin = "miter";//默认尖角

		ctx.lineWidth = 10;
		ctx.strokeStyle = "red";
		ctx.stroke();

		ctx.beginPath();

		//绘制第2个大于号图形 >
		ctx.moveTo(250,100);
		ctx.lineTo(350,150);
		ctx.lineTo(250,200);

		ctx.lineCap = "round";// 圆形线帽
		ctx.lineJoin = "round";//圆角

		ctx.lineWidth = 10;
		ctx.strokeStyle = "green";
		ctx.stroke();

		ctx.beginPath();

		//绘制第3个大于号图形 >
		ctx.moveTo(400,100);
		ctx.lineTo(500,150);
		ctx.lineTo(400,200);

		ctx.lineCap = "square";//默认 正方形线帽
		ctx.lineJoin = "bevel";//默认斜角

		ctx.lineWidth = 10;
		ctx.strokeStyle = "blue";
		ctx.stroke();
	</script>
</body>
</html>

示例效果：