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

pan²⁰²⁰

于 2020-05-13 12:17:34 发布

阅读量747

点赞数

CC 4.0 BY-SA版权

分类专栏：小程序文章标签： canvas js

本文链接：https://blog.youkuaiyun.com/qq_30409135/article/details/106095379

小程序中用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.setFi