html5 – Canvas消耗大量内存

我在我的Canvas实现方面遇到了困难,我在叠加层中打开了它.
画布元素宽760px,高2640px(我知道,不要问).

@H_403_9@

我每27.5px高处画线.@H_403_9@

@H_403_9@

ctx.moveTo(0,y);
ctx.lineTo(760,y);
ctx.strokeStyle = 'rgb(100,100,100)';
ctx.stroke();

显然,浏览器在创建画布时似乎会“窒息”.最终它通过(1-5secs),内存提高了20MB.@H_403_9@

关闭叠加层似乎没有释放这个记忆.
当我重新打开叠加层(重绘画布)时,内存再次增加.
等等等等…
我的chrome进程从60MB内存到600就这样了.@H_403_9@

将画布调整为264px高,每2.75px绘制线条的速度更快,仅消耗大约4MB(当然也似乎没有清除).@H_403_9@

谁有一些关于如何避免这种情况的指示.@H_403_9@

这是更多的代码
data是一个包含Entries属性的对象数组,该属性也是一个数组.@H_403_9@

@H_403_9@

[ { Entries : [{...},{...},...] },... ]

var $canvas = container.find('canvas'),canvas = $canvas.get(0),maxY = canvas.height,maxX = canvas.width,dX = maxX / (data.length + 1),ctx = canvas.getContext('2d');


var x1,y1,y2,mh;

$.each(data,function (i,day) {
    if (!day.Entries) return;

     $.each(day.Entries,function (j,entry) {
         x1 = (i + 1) * dX;
         mh = entry.beginDate.toHourminutes();
         y1 = (((mh.h * 60) + mh.m) / 1440) * maxY;
         mh = entry.EndDate.toHourminutes();
         y2 = (((mh.h * 60) + mh.m) / 1440) * maxY;

         switch (entry.TypE) {
             case CALENDARTYPEs.openingHOUR:
                 ctx.beginPath();
                 ctx.rect(x1,dX - 10,y2 - y1);
                 ctx.fillStyle = "rgb(125,125,125)";
                 ctx.fill();
                 ctx.closePath();
                 break;
             case CALENDARTYPES.bLOCKING:
                 ctx.clearRect(x1,dX,y2 - y1);
                 break;
         };
      });
  });

       delete x1,mh;

       //Draw grid on canvas.

       var x = 0,y = +0.5,stepYH = maxY / 24,stepYQ = stepYH / 4,isHour = true;

       ctx.lineWidth = 1;

       while (y < maxY) {
           isHour = (((y - 0.5) % stepYH) == 0);
           ctx.moveTo(isHour ? x : x + dX,y);
           ctx.lineTo(maxX,y);
           ctx.strokeStyle = isHour ? 'rgb(175,175,175)' : 'rgb(100,100)';
           ctx.stroke();
           y += stepYQ;
       };