<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas画布</title>
<style>
canvas{
border: 1px solid red;
}
</style>
</head>
<body>
<canvas width="800" height="600" id="cav"></canvas>
<script>
var cavs = document.getElementById('cav');
var txt = cavs.getContext('2d');//
txt.moveTo(100,100);//开始的位置
txt.lineTo(300,100);//结束位置
txt.strokeStyle = 'yellowgreen';//设置线条的颜色
// txt.lineWidth = 10;//设置线的宽度
// txt.stroke();//画笔//解决画了两次问题，方法一只需要保留最后的一个txt.stroke();即可
// 方法二：txt.beginPath();//解决问题重置
// 再画一条线
txt.moveTo(400,200);
txt.lineTo(400,500);
txt.stroke();
</script>
</body>
</html>