Canvas 画折线图

一、画折线图需要有如下准备如下：

　　1、绘制网格

　　2、绘制坐标系

　　3、绘制点

　　4、点连线就成了折线图

 

二、绘制网格

　　1、确认网格（每个格子）的大小

　　2、确认X轴方向有多少条横线

　　3、确认Y轴方向有多少条竖线

　　4、遍历画出来

　　

　三、坐标系

　　1、确定原点位置

　　2、确定两边的边距

　　3、确定箭头的长度，绘制等腰三角形

　　

　　

四、绘制点

　1、确定点的尺寸

　2、以坐标中心绘制点

     var Disc = function(x, y){
        this.x = x;
        this.y = y;
      }
      var dicsAside = 6;
      var dics1 = new Disc(100, 100);
      ctx.beginPath();
      ctx.moveTo(dics1.x - dicsAside / 2, dics1.y - dicsAside / 2);
      ctx.lineTo(dics1.x + dicsAside / 2, dics1.y - dicsAside / 2);
      ctx.lineTo(dics1.x + dicsAside / 2, dics1.y + dicsAside / 2);
      ctx.lineTo(dics1.x - dicsAside / 2, dics1.y + dicsAside / 2);
      ctx.closePath();
      ctx.fill();

 

五、绘制折线图

　注：网格，坐标系，点都能绘制出来了，下面就可以开始绘制折线图了