canvas画表格

data数据格式：

[
{“num”:388,“dfname”:“砼”,“zdmj”:156679.44,“jzmj”:5197303.22}, {“num”:24,“dfname”:“混”,“zdmj”:12888.83,“jzmj”:428493.83}
]

drawCanvasTable(data) {
      let canvas = document.querySelector("#canv");
      let ctx = canvas.getContext("2d");
      canvas.width = 385 * 2;
      canvas.height = data.length * 40 + 40;
      canvas.style.border = "1px solid #ccc";
      let rectH = 20;
      let rectW = 96;
      ctx.scale(2, 2);
      ctx.lineWidth = 1;
      ctx.strokeStyle = "#ccc";
      ctx.textAlign = "center";

      ctx.fillText(this.text,48,15)
      ctx.fillStyle = "#ff0000";
      ctx.fillText("数量", 144, 15);
      ctx.fillStyle = "#006fff";
      ctx.fillText("建筑面积(㎡)",240, 15);
      ctx.fillStyle = "#07c160";
      ctx.fillText("占地面积(㎡)", 336, 15);

      for (let i = 0; i < data.length; i++) {
        ctx.fillStyle = "#000000";
        ctx.fillText(data[i].dfname, 48, rectH * i + 35);
        ctx.fillStyle = "#ff0000";
        ctx.fillText(data[i].num, 144, rectH * i + 35);
        ctx.fillStyle = "#006fff";
        ctx.fillText(data[i].jzmj, 240, rectH * i + 35);
        ctx.fillStyle = "#07c160";
        ctx.fillText(data[i].zdmj, 336, rectH * i + 35);
      }
      //横线
      for (let i = 0; i < data.length + 2; i++) {
        ctx.moveTo(0, rectH * i);
        ctx.lineTo(canvas.width, rectH * i);
        // ctx.stroke();
      }
      //竖线
      for(let i=0;i<5;i++){
        ctx.moveTo(rectW * i, 0);
        ctx.lineTo(rectW * i, canvas.height);
        ctx.stroke();
      }
    },