canvas 线条

2021-03-07 15:34:34 作者：互联网

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>线条属性</title>
	<style>

	</style>
</head>
<body>
	<div id="wrap">
		<canvas id="canvas"><!-- 绘图 -->
			
		</canvas>
	</div>
	<script>
		let canvas = document.getElementById('canvas');
		let context = canvas.getContext('2d'); // 用于在画布上绘图的方法和属性
		canvas.width = 900;//设置绘图的宽
		canvas.height = 600;//设置绘图的高
		context.lineWidth = 80;
		context.beginPath();// 第一条路径。
		//开始一条路径，或重置当前的路径。
		context.moveTo(100,200);//把路径移动到画布中的指定点
		context.lineTo(300,400);
		context.strokeStyle = 'red';
		context.lineCap = 'butt';
		context.stroke();//会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径
        context.beginPath();// 第2条路径
		context.moveTo(300,200);
		context.lineTo(500,400);
		context.strokeStyle = 'pink';
		context.lineCap = 'round';
		context.stroke();
        context.beginPath();// 第3条路径
		context.moveTo(500,200);
		context.lineTo(700,400);
		context.strokeStyle = 'purple';
		context.lineCap = 'square';
		context.stroke();

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

标签：moveTo,lineTo,lineCap,路径,canvas,context,线条
来源： https://www.cnblogs.com/xiaoxuJS/p/14494835.html