其他分享
首页 > 其他分享> > canvas系列---【vue和原生js中canvas图形的绘制】

canvas系列---【vue和原生js中canvas图形的绘制】

作者:互联网

一 js原生实现canvas画图形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <h2>line canvas</h2>
        <canvas id="mycanvas" width="100" height="50" style="border: 1px solid #ccc;"></canvas>
    </div>
​
    <script src="jquery-1.7.2.min.js"></script>
    <script>
        window.onload = function(){
            var arr = [40,50,30,70,80,40,90,60,80,60,69,80,60]
            drawLine.minCurve(arr)
        }
        var drawLine = {};
        !function(){
            // 求数据最大值
            Array.prototype.max = function(){
                var max = this[0];
                var len = this.length;
                for (let i = 1; i < len; i++) {
                    if(this[i]>max){
                        max = this[i]
                    }
                }
                return max
            }
​
            function draw(arr){
                var width = 100,height=50;
                var maxV = arr.max();
                // 计算y轴增量
                var yStep = height/maxV
                var domCan = document.getElementById("mycanvas")
                var context = domCan.getContext("2d")
                context.beginPath();
                context.lineWidth = 2;
                context.strokeStyle = "#395b73";
                // context.moveTo(0,0) //开始画图的位置
                var x_space = width/(arr.length - 1);//水平点的间隙像素
                // x表示水平向右延伸,y表示垂直高度位置,从画板最左上角(0,0)开始计算坐标
                // context.lineTo(15,60); 
                var xLen = 0;
                for (let i = 0; i < arr.length; i++) {
                    var yValue = arr[i];//纵坐标值
                    xLen += x_space;
                    var yPont = height -yValue*yStep
                    if(i = 0){
                        xLen = 0;
                    }
​
                    var m = xLen + ','+ yPont;
                    context.lineTo (xLen,yPont)
                    
                }
                context.stroke();
                context.closePath();
            }
            drawLine.minCurve = draw;
        }()
    </script>
</body>
</html>

 

二 vue + render+ canvas 绘制图形

<template>
  <div>
    <!-- 这是table -->
    <table ref="searchPage">
      ........// 此处结构省略
    </table>
  </div>
</template>
​
<script>
export default {
  data() {
    return {
      // 表格的配置项
      labelArr: [
        { label: "姓名", field: "name", minwidth: 90 },
        {
          label: "近半月趋势缩略图",
          field: "sub",
          render: (row) => {
            return `<canvas 
                        id="mycanvas" width="100" height="50" 
                        style="border: 1px solid #ccc;">
                    </canvas>`;
          },
        },
        // {.......} // 此处配置省略
      ],
      arr: [],
    };
  },
  mounted() {
    // 在数据原型上绑定求最大值规则,求数据最大值
    Array.prototype.max = function () {
      var max = this[0];
      var len = this.length;
      for (let i = 1; i < len; i++) {
        if (this[i] > max) {
          max = this[i];
        }
      }
      return max;
    };
    this.canvasData();
  },
  methods: {
    async canvasData() {
      // 展示的数据
      this.arr = [40, 50, 30, 70, 80, 40, 90, 60, 80, 60, 69, 80, 60];
      let mycanvas = "mycanvas";
      // 先获取表格的数据,获取数组长度,根据长度调用几次画布方法
      let res = await this.$refs["searchPage"].tableData();
      for (let i = 0; i < res.data.length; i++) {
        mycanvas = `mycanvas${i}`;
        // 因为canvas是动态渲染的,通过for循环arr的长度把每条数据的索引拼接在id上生成不同的id,传给draw方        // 法画出多个图形
        this.draw(this.arr, mycanvas);
      }
    },
    // canvas绘制方法
    draw(arr, mycanvas) {
      var width = 100,
        height = 50;
      var maxV = arr.max();
      // 计算y轴增量
      var yStep = height / maxV;
      var domCan = document.getElementById("mycanvas");
      var context = domCan.getContext("2d");
      context.beginPath();
      context.lineWidth = 2;
      context.strokeStyle = "#395b73";
      // context.moveTo(0,0) //开始画图的位置
      var x_space = width / (arr.length - 1); //水平点的间隙像素
      // context.lineTo(15,60); // x表示水平向右延伸,y表示垂直高度位置,从画板最左上角(0,0)开始计算坐标
      var xLen = 0;
      for (let i = 0; i < arr.length; i++) {
        var yValue = arr[i]; //纵坐标值
        xLen += x_space;
        var yPont = height - yValue * yStep;
        if ((i = 0)) {
          xLen = 0;
        }
​
        // var m = xLen + "," + yPont;
        context.lineTo(xLen, yPont);
      }
      context.stroke();
      context.closePath();
    },
  },
};
</script>
​
<style>
</style>

 

 

标签:canvas,vue,max,arr,js,xLen,context,var,mycanvas
来源: https://www.cnblogs.com/chenhaiyun/p/15872102.html