Изменение вида «центр» холста html5

Question

Если у вас есть изображение 1024x1250 и элемент холста размером 600x800, я могу нарисовать изображение на холсте с центром, чтобы холст был по существу меньшим портами просмотра большего размера образ. Затем я хочу, чтобы эта точка центра двигалась, создавая иллюзию, что видовое окно просматривает другую часть изображения.

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

Answer 1

Вы можете добавить преобразования в контекст перед рисованием любого изображения (поворот, масштабирование, перевод ...). Вам нужна функция context.translate (x, y).

Затем, вам нужно всего лишь обратить ваше изображение в (0,0)

Например, чтобы отобразить нижнюю правую часть вашего изображения:

ctx.translate (-424, -450); 
ctx.drawImage (image, 0, 0); 

Вы можете проверить эту ссылку https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Transformations в см. множество примеров трансформации контекста.