canvas 线条

2021-03-07 15:34:34 阅读：214 来源： 互联网

标签：moveTo lineTo lineCap 路径 canvas context 线条

<!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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

canvas 线条