У меня возникли трудности с моей реализацией Canvas, которую я открываю в оверлее. Размер элемента Canvas составляет 760 пикселей в ширину и 2640 пикселей в высоту (я знаю, не спрашивайте).
Я рисую линии через каждые 27,5 пикселей в высоту.
ctx.moveTo(0, y);
ctx.lineTo(760, y);
ctx.strokeStyle = 'rgb(100,100,100)';
ctx.stroke();
Похоже, что браузер "задыхается" от этого при создании холста. В конце концов, он проходит (1-5 секунд), и объем памяти увеличивается на 20 МБ.
Закрытие оверлея, похоже, не освобождает эту память. Когда я снова открываю оверлей (который перерисовывает холст), память снова увеличивается. И так далее, и так далее. .. Мой процесс Chrome быстро переходит с 60 МБ памяти на 600+.
Изменение размера холста до 264 пикселей в высоту и рисование линий через каждые 2,75 пикселей происходит намного быстрее и занимает всего около 4 МБ (которые, конечно же, не очищаются).
У кого есть подсказки, как этого избежать.
[ { 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;
};