Перевод HTML5 холста

Question

Я хочу знать, как я могу перевести всю сцену, уже нарисованную на холсте html5, например, на 5 пикселей вниз.Я знаю, что метод translate просто переводит систему координат холста, но я хочу знать, есть ли способ перевести всю сцену, уже нарисованную на холсте.

Answer 1

Вы можете применить преобразования и вызвать drawImage, передавая сам холст.

ctx.save();
ctx.translate(0, 5);
ctx.drawImage(canvas, 0, 0);
ctx.restore();

При этом исходное содержимое все равно будет ниже.В зависимости от эффекта, который вы пытаетесь достичь, установка globalCompositeOperation может помочь вам в этом.

Но, скорее всего, вам нужно будет использовать drawImage, чтобы сначала скопировать на второй холст, очистить текущий, применитьпреобразовать и нарисовать из копии.

Answer 2

Нет, если вы не сделаете снимок экрана и не переведете его.

Однако просто вставьте

context.translate(0, 5)// or your values

прямо перед кодом для рисования. MDN Canvas Tutorial (Transformations)