Canvas rectangle image

Question

Итак, я начал работать с холстом, и у меня была проблема, чтобы привыкнуть к слоям и их наполнениям.

Через несколько часов мне удалось сделать простую анимацию с использованием основных цветов, но основная проблема, когда я хочу, чтобы заполнить ящики массива

var boxes = []; 
boxes.push({ 
    x: 50, 
    y: 200, 
    width: 100, 
    height: 100 
}); 

, содержащие координаты и параметры с рисунком.

var pat = ctx.createPattern(ground_block_200_80,'repeat'); 

сделать прямоугольник из коробки массива я использую

ctx.fillStyle = pat; 
    ctx.fillRect(boxes[0].x, boxes[0].y, boxes[0].width, boxes[0].height); 

заполняет начальный весь слой из X = 0 и Y = 0, но я хотел бы начать Patern из верхнего левого угла прямоугольника

Возможно ли каким-либо образом переместить слой или отрегулировать узор?

Answer 1

Из коробки нет широко распространенного способа настройки рисунка на конкретное смещение. Есть setTransform method defined in the standard, но поддержка very scarce.

Ваш лучший выбор, вероятно, не использовать шаблон и полагаться на drawImage().

Примечание: можно объединить с помощью рисунка в «верхнем левом» область вашего прямоугольника и использовать drawImage вокруг нижней & правой границы для эффективности, если картина повторяется много раз внутри каждой коробки, но это будет сложный, подверженный ошибкам код.