Оптимизировать движущийся узор на холсте?

Question

Я пытаюсь добиться перемещения картины внутри холста, но через несколько секунд (или минут) ситуация становится неуправляемой.

canvas = document.querySelector('canvas'); 
canvas.width = 400; 
canvas.height = 240; 
ctx = canvas.getContext('2d'); 
image = new Image(); 
image.src = 'pattern.png'; 
t = 0; 

update(); 

function update() { 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    ctx.save(); 

    ctx.translate(t, 2*t); 
    ctx.fillStyle = ctx.createPattern(image, 'repeat'); 
    ctx.rect(0, 0, canvas.width, canvas.height); 
    ctx.fill(); 
    ctx.restore(); 

    t++; 

    requestAnimationFrame(update); 
} 

Вот jsfiddle (предупреждение потребление памяти).

Моя цель - использовать этот холст в качестве текстуры для спрайта THREEjs, непрерывно работающего в сцене. Я не могу анимировать материал спрайтов, играющий с uvOffsets, так как будет 3 или 4 прозрачных шаблона, движущихся в разных направлениях и перекрывающих друг друга. Возможно ли его настроить?

Благодарим вас заблаговременно.

Answer 1

Причина, по которой она замедляется с течением времени, заключается в том, что rect() будет добавлять и накапливать на объект пути с течением времени, поэтому каждый раз, когда вызывается fill(), все эти пробелы прямоугольника заполняются.

Просто замените эту строку:

ctx.rect(0, 0, canvas.width, canvas.height); 

с

ctx.fillRect(0, 0, canvas.width, canvas.height); 

Необязательно добавить beginPath() перед добавлением rect(). fillRect() растеризуется напрямую, не добавляя прямоугольник к пути.

Также не забудьте компенсировать положение прямоугольника, так как область, которую он заполняет, также перемещается, в конце концов, вне области холста. Просто компенсировать с помощью обратного значений перевода:

ctx.fillRect(-t, -t*2, canvas.width, canvas.height); 

В новых браузерах мы можем использовать setTransform непосредственно на CanvasPattern объекта:

// assuming pattern is set as fill-style 
ctx.fillStyle.setTransform(1,0,0,1, x, y); 

модифицированный пример вкл. некоторые другие предложения по оптимизации цикла:

... 
image.onload = function() { 
    ctx.fillStyle = ctx.createPattern(image, 'repeat'); 
    update(); 
}; 

function update() { 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 

    ctx.setTransform(1,0,0,1, t, 2*t); // optionally replace save/restore/translate 
    ctx.fillRect(-t, -t*2, canvas.width, canvas.height); 

    t++; 

    requestAnimationFrame(update); 
}