微信小程序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**/