canvas绘制直线图

最新推荐文章于 2021-03-10 12:59:28 发布

嘴巴嘟嘟

最新推荐文章于 2021-03-10 12:59:28 发布

阅读量386

点赞数 2

文章标签： canvas echarts html5

本文链接：https://blog.csdn.net/qq_41961239/article/details/111409731

版权

Canvas

canvas 最早由Apple引入WebKit,用于Mac OS X 的 Dashboard,后来又在Safari和Google Chrome被实现。
基于 Gecko 1.8的浏览器,比如 Firefox 1.5, 同样支持这个元素。
<canvas> 元素是WhatWG Web applications 1.0规范的一部分,也包含于HTML 5中。
下面使用canvas通过获取数据来绘制简单的折线统计图

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <canvas width="600" height="400" style="border: 1px solid gray;"></canvas>

  <script>


    var LineChar = function (ctx) {
      this.ctx = ctx || document.querySelector("canvas").getContext("2d");
      // 画布大小
      this.canvasWidth = this.ctx.canvas.width;
      this.canvasHeight = this.ctx.canvas.height;
      // 网格大小
      this.gridSize = 10;
      this.space = 20;
      this.arrowSize = 10;
      this.dottedSzie = 6;
      // 坐标原点
      this.x0 = this.space;
      this.y0 = this.canvasHeight - this.space;
    }
    // 行为方法
    LineChar.prototype.init = function (data) {
      this.drawGrid();
      this.drawAxis();
      this.drwaDotted(data);
    }
    // 绘制网格
    LineChar.prototype.drawGrid = function () {
      var xLineTotal = Math.floor(this.canvasHeight / this.gridSize);
      for (var i = 0; i <= xLineTotal; 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 = "gray";
        this.ctx.stroke();
      }
      var yLineTotal = Math.floor(this.canvasWidth / this.gridSize);
      for (var i = 0; i <= yLineTotal; i++) {
        // 初始化 y轴
        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 = "gray";
        this.ctx.stroke();
      }
    }
    // 绘制坐标系
    LineChar.prototype.drawAxis = function () {
      //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.fill();
      this.ctx.stroke();
      // 绘制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.fill();
      this.ctx.stroke();
    }
    // 绘制所有点
    LineChar.prototype.drwaDotted = function (data) {
      var that = this;
      // 记录当前坐标 为下次坐标使用
      var precanvasX = 0;
      var precanvasY = 0;
      data.forEach(function (item, i) {
        var canvasX = that.x0 + item.x;
        var canvasY = that.y0 - item.y;
        // 遍历所有的坐标点
        that.ctx.beginPath();
        that.ctx.moveTo(canvasX - that.dottedSzie / 2, canvasY - that.dottedSzie / 2);
        that.ctx.lineTo(canvasX + that.dottedSzie / 2, canvasY - that.dottedSzie / 2);
        that.ctx.lineTo(canvasX + that.dottedSzie / 2, canvasY + that.dottedSzie / 2);
        that.ctx.lineTo(canvasX - that.dottedSzie / 2, canvasY + that.dottedSzie / 2);
        that.ctx.closePath();
        that.ctx.fill();
        //开始连线
        if (i == 0) {
          that.ctx.beginPath();
          that.ctx.moveTo(that.x0, that.y0);
          that.ctx.lineTo(canvasX, canvasY);
          that.ctx.stroke();
        } else {
          that.ctx.beginPath();
          that.ctx.moveTo(precanvasX, precanvasY);
          that.ctx.lineTo(canvasX, canvasY);
          that.ctx.stroke();
        }
        precanvasX = canvasX;
        precanvasY = canvasY;

      });
    }
    //输入数据
    var data = [
      {
        x: 100,
        y: 120
      }, {
        x: 200,
        y: 160
      }, {
        x: 300,
        y: 200
      }, {
        x: 400,
        y: 260
      },{
        x:500,
        y:100
      }
    ]

    var LineChar = new LineChar();
    LineChar.init(data);
  </script>
</body>

</html>

嘴巴嘟嘟

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
canvas绘制直线图

Canvascanvas 最早由Apple引入WebKit,用于Mac OS X 的 Dashboard,后来又在Safari和Google Chrome被实现。基于 Gecko 1.8的浏览器,比如 Firefox 1.5, 同样支持这个元素。<canvas> 元素是WhatWG Web applications 1.0规范的一部分,也包含于HTML 5中。下面使用canvas通过获取数据来绘制简单的折线统计图<!DOCTYPE html><html la
复制链接

扫一扫