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