<canvas id="canvas">

</canvas>


<script>
   var canvas =  document.getElementById('canvas');
   var context = canvas.getContext('2d');
   context.moveTo(100,100)//直线的起点

   context.lineTo(700,700)//直线的终点

   context.lineTo(100,700)//多笔画时设置多终点即可

   context.lineTo(100,100)//最后的笔画终点和开始的起点同坐标能连成一个完整形状（每一笔都是以上一个终点为起点的）
   context.stroke();
</script>