Нарисовать повернутый элемент на холсте

Question

Я хочу нарисовать полукомпозитный элемент на холсте, повернутый без вращения холста, так что мне не нужно вычислять все различные точки x/y элемента.

Я думаю, что основной процесс мне нужно использовать это:

• перевести 0,0 точку на месте нарисованный элемент будет вращаться вокруг,
• вращать холст,
• ничья элемент,
• Вращение холста назад,
• восстановить исходную точку.

Мне нужно будет сделать это более одного раза. Я читал, что вращающаяся/вращающаяся задняя часть может ввести некоторую ошибку, при этом конечное изображение отключается немного. Есть ли способ избежать этого?

Answer 1

Прежде чем выполнять поворот и перевод, звоните context.save(). Это создаст моментальный снимок текущей трансформации холста (а также некоторые другие вещи, такие как стиль рисования, область клипа и т. Д., Но не данные пикселя) и сохраните его в стеке.

После того, как вы нарисовали форму, позвоните по телефону context.restore(). Это выведет последнее сохраненное состояние из стека состояний и восстановит текущее состояние его холста.

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

Пример функции:

function drawImageRotated(x, y, rotation, image) { 
    context.save(); 

    context.translate(x, y); 
    context.rotate(rotation); 
    context.drawImage(image, -image.width/2, -image.height/2);   

    context.restore(); 

    // context translation and rotation are now on the same state they were 
    // before the function call 
} 

Для получения более подробной информации о состоянии холст, обратитесь к the canvas specification.