HTML5 Canvas——折線圖

 <script type="text/javascript">
    /*1.繪制網格  網格大小 10px 網格的顏色 #ddd */

    /*2.繪制坐標  軸的離邊距離  20px 箭頭的尺寸 10px */
    /*3.繪制點 點尺寸 6px */
    /*4.連接點 */
    /*5.准備數據*/
    var data = [
      { x: 50, y: 90 },
      { x: 150, y: 150 },
      { x: 250, y: 250 },
      { x: 350, y: 130 },
      { x: 450, y: 80 }
    ]

    /*使用面向對象的方式實現*/
    var LineChart = function (ctx) {
      //繪制工具
      this.ctx = ctx || document.querySelector('canvas').getContext('2d');
      //網格大小
      this.gridSize = 10;
      //網格線的顏色
      this.gridColor = '#fff';
      //軸的離邊距離
      this.space = 20;
      //箭頭的尺寸
      this.arrowSize = 10;
      //點尺寸
      this.pointSize = 6;

      //畫布的高度
      this.canvasHeight = this.ctx.canvas.height;
      //畫布的寬度
      this.canvasWidth = this.ctx.canvas.width;

      //入口函數
      //this.init();
    }
    //入口函數
    LineChart.prototype.init = function (data) {
      this.drawGrid();
      this.drawXY();
      this.drawPointList(data);
      this.joinPoint();
    };
    //繪制網格
    LineChart.prototype.drawGrid = function () {
      /*業務*/
      /*1. 繪制X軸方向的線*/
      var xCount = Math.floor(this.canvasHeight / this.gridSize);
      for (var i = 0; i < xCount; i++) {
        this.ctx.beginPath();
        this.ctx.moveTo(0, i * this.gridSize - 0.5);
        this.ctx.lineTo(this.canvasWidth, i * this.gridSize - 0.5);
        this.ctx.strokeStyle = this.gridColor;
        this.ctx.stroke();
      }

      /*2. 繪制Y軸方向的線*/
      var yCount = Math.floor(this.canvasWidth / this.gridSize);
      for (var i = 0; i < yCount; i++) {
        this.ctx.beginPath();
        this.ctx.moveTo(i * this.gridSize - 0.5, 0);
        this.ctx.lineTo(i * this.gridSize - 0.5, this.canvasHeight);
        this.ctx.strokeStyle = this.gridColor;
        this.ctx.stroke();
      }
    }
    //繪制原點和坐標軸
    LineChart.prototype.drawXY = function () {
      /*1.坐標原點*/
      this.x0 = this.space;
      this.y0 = this.canvasHeight - this.space;
      /*2.繪制X軸*/
      this.ctx.beginPath();
      this.ctx.moveTo(this.x0, this.y0);
      this.ctx.lineTo(this.canvasWidth - this.space, this.y0);
      this.ctx.lineTo(this.canvasWidth - this.space - this.arrowSize, this.y0 + this.arrowSize / 2);
      this.ctx.lineTo(this.canvasWidth - this.space - this.arrowSize, this.y0 - this.arrowSize / 2);
      this.ctx.lineTo(this.canvasWidth - this.space, this.y0);
      this.ctx.strokeStyle = '#000';
      this.ctx.stroke();
      this.ctx.fill();
      /*3.繪制Y軸*/
      this.ctx.beginPath();
      this.ctx.moveTo(this.x0, this.y0);
      this.ctx.lineTo(this.space, this.space);
      this.ctx.lineTo(this.space + this.arrowSize / 2, this.space + this.arrowSize);
      this.ctx.lineTo(this.space - this.arrowSize / 2, this.space + this.arrowSize);
      this.ctx.lineTo(this.space, this.space);
      this.ctx.stroke();
      this.ctx.fill();
    }
    //繪制所有點
    LineChart.prototype.drawPointList = function (data) {
      //測試
      //this.drawPoint(200,200);
      var _this = this;
      //原來的點
      var oldPoint = {
        x: this.x0,
        y: this.y0
      };
      data.forEach(function (item, i) {
        /*繪制小正方形 就是點*/
        /*在繪制之前轉成cnavas坐標*/
        var x = _this.x0 + item.x;
        var y = _this.y0 - item.y;
        _this.drawPoint(x, y);
        _this.joinPoint(oldPoint, {
          x: x,
          y: y
        });

        //連線完畢之后去記錄  把這一次的點當做下一次連線的起始點
        oldPoint = {
          x: x,
          y: y
        }
      });
    }
    LineChart.prototype.drawPoint = function (x, y) {
      this.ctx.moveTo(x - this.pointSize / 2, y - this.pointSize / 2);
      this.ctx.lineTo(x + this.pointSize / 2, y - this.pointSize / 2);
      this.ctx.lineTo(x + this.pointSize / 2, y + this.pointSize / 2);
      this.ctx.lineTo(x - this.pointSize / 2, y + this.pointSize / 2);
      this.ctx.closePath();
      this.ctx.fill();
    };
    //連接點
    LineChart.prototype.joinPoint = function (oldPoint, currPoint) {
      /*上一個點的坐標和現在的坐標相連*/
      //oldPoint {x,y}
      //currPoint {x,y}
      this.ctx.beginPath();
      this.ctx.moveTo(oldPoint.x, oldPoint.y);
      this.ctx.lineTo(currPoint.x, currPoint.y);
      this.ctx.stroke();
    };
    //使用
    var lineChart = new LineChart();
    lineChart.init(data);
  </script>