②Canvas直线图形

    在Canvas中，基本图形有两种：1、直线图形。2、曲线图形。Canvas常见的直线图形有三种，分别是直线、矩形、多边形。

 （1）Canvas坐标系

1、数学坐标系：y轴正方向向上。

2、W3C坐标轴：y轴正方向向下。

   (2) 直线的绘制

在Canvas中，可以使用moveTo()和lineTo()这两个方法配合使用来画直线。利用这两个方法，我们可以画一条直线，也可以同时画多个直线。

语法：

cxt.moveTo(x1,y1);//将画笔移到点(x1,y1)，确定“起点坐标”

cxt.lineTo(x2,y2);//将画笔从起点(x1,y1)开始画直线，一直画到终点坐标(x2,y2)，确定“终点坐标”

cxt.lineTo(x3,y3);//第二次使用lineTo()会以“上一个终点坐标”作为起点坐标，(x3,y3)作为“下一个终点坐标”

cxt.stroke();//用笔勾勒出点与点之间的线

注意：尽量将window.οnlοad=function(){获取canvas元素，创建对象，调用方法画线的代码}，这样只有当文档加载完才会触发，这样可以避免无法获取元素的现象。