var c = document.getElementById("myCanvas"); // 获取 canvas
var context = c.getContext("2d"); // 2d 视图环境
// 第一条线
context.beginPath(); // 开始绘制
context.strokeStyle = 'blue'; // 线条颜色
context.moveTo(60, 20); // 起始坐标
context.lineTo(220, 20); // 终点坐标
context.stroke(); // 画线
// 第二条线
context.beginPath();
context.strokeStyle = 'green';
context.moveTo(60, 30);
context.lineTo(160, 120);
context.lineWidth = 8; // 线条宽度
context.lineCap = 'round'; // 线条端点样式
context.stroke();
<canvas id="myCanvas">您的浏览器不支持canvas，请升级或选择其他浏览器</canvas>