Каков наиболее эффективный способ разбить изображение с помощью холста?
Недавно я работал над платформером и хотел бы добавить в него несколько изображений.
Моя цель — замостить изображение, используя как можно меньше CPU/GPU, и я пробовал два решения: рисовать каждое изображение с помощью drawImage() и использовать стиль заливки createPattern.
for метод петли:
ctx = canvas.getContext("2d");
for (let i=0; i<heightInTiles; i++) {
for (let j=0; j<widthInTiles; j++) {
ctx.drawImage(image, screenX + j * blockSize, screenY + i * blockSize);
}
}
Проблема с этим решением заключается в том, что рисование каждого изображения по отдельности потребляет много ресурсов процессора и графического процессора. Есть ли способ сделать это более эффективным? (Например, 50-процентная загрузка ЦП?)
fillStyle метод
var pat = ctx.createPattern(image, "repeat");
ctx.fillStyle = pat;
ctx.fillRect(screenX, screenY,
widthInBlocks * blockSize,
heightInBlocks * blockSize);
Это решение занимает меньше места, но имеет странный эффект: шаблон выравнивается только по верхнему левому углу холста.
Я просто ищу более быстрый способ рисовать нужные мне плитки на экране. Не могли бы вы, ребята, помочь мне с этим?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Преобразование узора
Шаблон — это, безусловно, самый быстрый способ повторить шаблон с помощью 2D API. Для лучших результатов вам нужно будет использовать WebGL.
Чтобы переместить шаблон, вам нужно манипулировать преобразованием с помощью pattern.setTransform( через DOMMatrix
Пример
Установка начальной позиции паттерна
var pat = ctx.createPattern(image, "repeat");
pat.setTransform(new DOMMatrix([1,0,0,1,screenX, screenY])); // set top left starting
// pos of pattern
ctx.fillStyle = pat;
ctx.fillRect(screenX, screenY, widthInBlocks * blockSize, heightInBlocks * blockSize);
@Kaiido На SO есть множество устаревших примеров, например stackoverflow.com/a/47838137/3877726
придирка: DOMMatrix требует
new. И хотя я знаю, что вы знаете, просто обратите внимание, что для старых браузеров, которые не поддерживаютCanvasPattern.setTransform, вы также можете установить один из контекста и противодействовать переводу в вызовеfillRectили даже разделить объявление пути и заполнение на два различные матричные преобразования.