利用canvas实现折线图的绘制

我们知道现在的很多H5的小游戏的开发都是基于canvas这个画布的，其实canvas之所以这么强大考的是他强大的API库的结果，知道一些canvas的基本API并且可以利用这些API是一个前端开发人员的基本素质，那么我们今天就来跟着小编来一起利用面向对象的思想来封装一个折线图的绘制

html代码

<canvas style="border:1px solid red" width="500" height="500"></canvas>
    </body>

JavaScript代码

<script>
 //获取canvas的dom元素
 var cvs=document.querySelector("canvas");
 //创建绘制环境
 var cxt=cvs.getContext("2d");
   /*
        * constructor { LineChart } 折线图构造函数
        * param { ctx: Context } 绘图上下文
        * param { paddingArr: Array } 折线图到画布四边的距离，存储顺序为上右下左
        * param { arrowArr: Array } 折线图中箭头的宽和高
        * param { data: Array } 存储了折线图中所需的数据
        * */
        function LineChart(ctx,paddingArr,arrowArr,data){
         this.ctx=ctx;
         this.paddingArr=paddingArr;
         this.arrowArr=arrowArr;
         this.data=data;
         this.arrowHeight=arrowArr[0];
         this.arrowWidth=arrowArr[1];

         //计算上顶点的距离
         this.vertexTop={
          x:this.paddingArr[3],
          y:this.paddingArr[0]
         };
         //计算原点的距离
         this.origin={
          x:this.paddingArr[3],
          y:this.ctx.canvas.height-this.paddingArr[2]
         };
         //计算右边点的距离
         this.vertexRight={
          x:this.ctx.canvas.width-this.paddingArr[1],
          y:this.ctx.canvas.height-this.paddingArr[2]
         };
         this.process();
        }

        LineChart.prototype={
         //设置构造函数
         constructor:LineChart,
         //绘制坐标轴中的两条线
         drawZuobiao:function(){
          this.ctx.beginPath();
          this.ctx.moveTo(this.vertexTop.x, this.vertexTop.y);
          this.ctx.lineTo(this.origin.x, this.origin.y);
          this.ctx.lineTo(this.vertexRight.x, this.vertexRight.y);
          this.ctx.stroke();
         },
         drawArrow:function(){
          this.ctx.beginPath();
          this.ctx.moveTo(this.vertexTop.x, this.vertexTop.y);
          this.ctx.lineTo(this.vertexTop.x-this.arrowWidth/2, this.vertexTop.y+this.arrowHeight);
          this.ctx.lineTo(this.vertexTop.x, this.vertexTop.y+this.arrowHeight/2);
          this.ctx.lineTo(this.vertexTop.x+this.arrowWidth/2, this.vertexTop.y+this.arrowHeight);
          this.ctx.closePath();
          this.ctx.fill();
          this.ctx.stroke();

          this.ctx.beginPath();
          this.ctx.moveTo(this.vertexRight.x, this.vertexRight.y);
          this.ctx.lineTo(this.vertexRight.x-this.arrowHeight, this.vertexRight.y-this.arrowWidth/2);
          this.ctx.lineTo(this.vertexRight.x-this.arrowHeight/2, this.vertexRight.y);
          this.ctx.lineTo(this.vertexRight.x-this.arrowHeight, this.vertexRight.y+this.arrowWidth/2);
          this.ctx.closePath();
          this.ctx.fill();
          this.ctx.stroke();

         },

         process:function(){
          this.processData=[];
          //在这一部分将画布认识的坐标转化为本坐标系的坐标
          for (var i = 0; i < this.data.length; i+=2) {
           this.processData.push(this.origin.x+this.data[i]);
           this.processData.push(this.origin.y-this.data[i+1]);
          };
          
         },

         drawOrcle:function(){
          this.ctx.beginPath();
          for (var i = 0; i < this.processData.length; i+=2) {
           this.ctx.arc(this.processData[i],this.processData[i+1], 5, 0, Math.PI*2);
           this.ctx.fill();
           
          };
         },

         drawLine:function(){
          this.ctx.beginPath();
          for (var i = 0; i < this.processData.length; i+=2) {
           this.ctx.lineTo(this.processData[i], this.processData[i+1]);
          };
          this.ctx.stroke();

         },
         draw:function(){
          this.drawZuobiao();
          this.drawArrow();
          this.drawOrcle();
          this.drawLine();
         }
        };

        var linechat=new LineChart(cxt,[20,20,20,20],[10,10],[10,10,20,20,60,60,100,100]);
        linechat.draw();

        
</script>

具体的详细步骤已经在代码里有所体现了，放到H5标准下的页面就好了！