Поверните рисунок на холсте

Question

У меня есть простая задача - мне нужно нарисовать один прямоугольник, повернуть и скопировать его и клонировать его повернутую версию. Я стараюсь сделать это так:

var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 

//1. rotate canvas 
ctx.rotate(-30 * Math.PI/180); 
ctx.rect(10, 60, 80, 40); 
ctx.stroke(); 

//2. copy rotated rectangle 
var img = ctx.getImageData(0, 0, 140, 140); 

//3. rotate back 
ctx.rotate(30 * Math.PI/180); 

//4. draw rotated version of the rectangle 
ctx.putImageData(img, 80, 100); 

Идея очень проста. На первом шаге я рисую прямоугольник, на втором шаге поворачиваю свой холст и делаю то, что, по моему мнению, является снимком (или создаю копию моего повернутого прямоугольника), на третьем шаге поворачиваю свой холст назад (так что мой повернутый прямоугольник должен больше не поворачиваться), и на последнем шаге я добавляю новый объект к холсту - копию повернутого прямоугольника. Но это то, что я получаю:

В то время как я ожидал, чтобы получить эту картину:

Что я делаю неправильно и как я могу получить желаемый результат?

Answer 1

«putImageData не влияет на матрицу преобразования»

Смотрите здесь: putImageData() on rotated canvas work incorrect

Вместо этого, если вы хотите сложный образ должен быть скопирован в память, а затем несколько раз рисуется на экране под разными углами , вы можете использовать временный холст. Это сообщение дает хороший пример:

How to rotate the existing content of HTML5 canvas?

Если вам необходимо создать несколько спрайтов, и создание нескольких полотен не будете делать, рассмотреть рисунок вашего спрайта соответствующего размера временного холста, а затем преобразовать содержимое временного холста к изображению с помощью canvas.toDataUrl

пост дает хороший пример:

https://davidwalsh.name/convert-canvas-image