微信小程序canvas实现时间格子

设计图的表格大概是这个样子的~（时间格子之类的东西）

头痛能怎么办？（这功能比较重要，只能画呗）
思路大概是这个样子的
计算所有格子总占宽、高 => 画表格 => 按照占比知道已经度过了多少格子 => 画红色底格子

/**画表格 start**/
var context = wx.createCanvasContext("mycanvas");
  context.setStrokeStyle('#FF5A21')
   context.setLineWidth(0.5)
   //设置表格宽高均为200px
   var rectH=20;
   var rectW=20;
   let tableWW = 200//(可以自己设置值)
   let tableHH = 200//(可以自己设置值)
   // 第一步： 绘制横线
   let xx = parseInt(tableHH/rectH)
   let yy = parseInt(tableWW/rectW)
   for(let j=0;j<xx+1;j++){
     context.moveTo(0,rectH*j);
     context.lineTo(yy*rectW,rectH*j);
     context.stroke();
   }
   //第二步：绘制竖线
   for(let i=0;i<yy+1;i++){
     context.moveTo(rectW*i,0);
     context.lineTo(rectW*i,xx*rectH);
     context.stroke();
   }
   /**画表格里面的红色格子**/
   let totalGrids = xx*yy;//总共的格子数
   var hasGrids = parseInt(totalGrids*(timeInfo.spendDay/(timeInfo.byDay+timeInfo.spendDay)))//已经度过的格子数
   //已经度过的格子数的行数，以及取余列数
   let mm = parseInt(hasGrids/yy)
   let nn = hasGrids%yy
   for (let m = 0; m < mm; m++) {//
     for (let n = 0; n < yy; n++) {
       context.rect(4+n*20,4+20*m,14,14)
       context.setFillStyle("#FF5A21")
       context.fill()
     }
   }
   for (let m = 0; m < nn; m++) {
     context.rect(4+m*20,4+20*mm,14,14)
     context.setFillStyle("#FF5A21")
     context.fill()
   }
 /**画表格 end**/