小程序 中用canvas 画表格 mpvue框架

小程序 中用canvas 画表格 mpvue框架

废话不多说，直接上代码

 /**该方法用来绘制表格        
  * *@param cxt:canvas的上下文环境           
  * *@param x:x轴坐标          
   * *@param y:y轴坐标          
 **/  
createBlock(cxt,x,y){       
 	 var a , b,lineX,lineY;       
	 var x_zuobiao=0;        
	 var y_zuobiao=0;        
	 var w = 70;        //单个表格宽
	 var h = 50;         //单个表格高
	 var middelFont = this.canvasWidth > 300 ? 14 : 12;       
	  cxt.beginPath();        
	  var arr = this.arr       
  	 for(var l=1;l<=arr.length;l++){            
   		var child = arr[l-1]            
   		for(var r=1;r<=child.length;r++){                
		   a=x+(r-1)*w;                
		   b=y+(l-1)*h;                
		   x_zuobiao=a+10;               
		    y_zuobiao=b+10;                
		    lineX = a+w                
		    lineY = b-h/2               
		    cxt.rect(a,b,w,h);                
		    cxt.setFontSize(middelFont);                
		    cxt.setFillStyle('#ffffff');                
		    cxt.fillText(child[r-1],x_zuobiao,b+(h/2)+5);                
		    cxt.strokeStyle = '#ffffff';                
		    cxt.stroke();            
		    }
		    	//固定标题用这个
	             	 // var child = arr[l]            
	                // for(var r=1;r<=child.length;r++){            
	                //     a=x+(r-1)*w;            
	                //     b=y+(l-1)*h;            
	                //     x_zuobiao=a+10;           
	                 //     y_zuobiao=b+10;            
	                 //     lineX = a+w            
	                 //     lineY = b-h/2            
	                 //     cxt.rect(a,b,w,h);            
	                 //     cxt.setFontSize(middelFont);            
	                 //     cxt.setFillStyle('#ffffff');           
	                 //     cxt.fillText(child[r-1],x_zuobiao,b+(h/2)+5);            
	                 //     cxt.strokeStyle = '#ffffff';            
	                 //     cxt.stroke();           
	                  // };
	 cxt.strokeStyle = '#ffffff';           
          cxt.stroke();       
      }
      },