小程序 中用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();
}
},