html5 canvas资源占用,html5 – Canvas消耗大量内存

我在我的Canvas实现方面遇到了困难,我在叠加层中打开了它.

画布元素宽760px,高2640px(我知道,不要问).

我每27.5px高处画线.

ctx.moveTo(0, y);

ctx.lineTo(760, y);

ctx.strokeStyle = 'rgb(100,100,100)';

ctx.stroke();

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

关闭叠加层似乎没有释放这个记忆.

当我重新打开叠加层(重绘画布)时,内存再次增加.

等等等等…

我的chrome进程从60MB内存到600就这样了.

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

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

这是更多的代码

data是一个包含Entries属性的对象数组,该属性也是一个数组.

[ { 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, y1, dX - 10, y2 - y1);

ctx.fillStyle = "rgb(125, 125, 125)";

ctx.fill();

ctx.closePath();

break;

case CALENDARTYPES.BLOCKING:

ctx.clearRect(x1, y1, dX, y2 - y1);

break;

};

});

});

delete x1, y1, y2, 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,100)';

ctx.stroke();

y += stepYQ;

};