несколько изображений на холсте HTML

Question

Мне нужно отобразить несколько изображений, которые будут располагаться один над другим в некоторых параллельных областях.Как правильно сделать это, если каждое изображение должно быть повернуто на другой угол и расположено в разных координатах (x, y)?

Нужно ли рисовать их на одном холсте и как-то по-разному поворачивать их на этом холсте, или мне нужно создавать разные холсты для каждого изображения?После того, как я создал разные холсты для каждого изображения, оно отображало только последнее изображение, и полотна были рядом друг с другом без параллельных областей ..

Спасибо ...

Answer 1

холст имеет те очень полезные преобразования, которые вы можете использовать. То, что вам сейчас нужно - это холст '.translate и .rotate

Допустим, вы создаете функцию, которая принимает img изображение, x координату, y координату и rad поворот к аргументу верхнего левого угла, вот как вы это сделаете:

function displayRotatedImage( img, x, y, rad ){

    ctx.translate( x, y ); // ctx is your canvas context
    ctx.rotate( rad );
    ctx.drawImage( img, 0, 0 );
    ctx.rotate( -rad ); // don't forget to get everything to its previous state!
    ctx.translate( -x, -y );


}

Вы видите, что происходит? сначала мы перемещаемся к оси вращения, используя .translate, затем мы вращаемся вокруг этой оси, используя .rotate, и мы рисуем наше изображение относительно нашей системы, и так как 0 0 является нашей точкой поворота сейчас, благодаря переводя, мы просто рисуем изображение в 0 0. Теперь мы должны повернуть и снять перевод, чтобы перевести холст к его первоначальному преобразованию;)