キャンバス上で図面を回転する

Question

私は単純な作業をしています - 1つの長方形を描き、回転してコピーし、回転したものを複製する必要があります。私はそれをそうしようとします：

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); 

アイデアは非常に簡単です。最初のステップでは、矩形を描き、2番目のステップでキャンバスを回転させ、スナップショット（または回転した四角形のコピーを作成）を行います。3番目のステップでキャンバスを回転させます。もう回転させないでください）、最後のステップではキャンバスに回転オブジェクトの新しいオブジェクトを追加します。しかし、これは私が得るものです：私が間違っているのは何

とどのように私は望ましい結果を得ることができます：私はこの絵を取得することが期待に対し

？

Answer 1

は

「putImageDataは、変換行列に影響されない」ここを参照してください：あなたがしたい場合putImageData() on rotated canvas work incorrect

代わりに、複雑な画像をメモリにコピーされた後、繰り返し異なる角度で画面上に描画します一時的なキャンバスの使用を検討することもできます。この投稿は、良い例を与える：あなたは複数の画像のスプライトを作成し、複数のキャンバスを作成することはしないだろう、にあなたのスプライトを描画考慮する必要がある場合は

How to rotate the existing content of HTML5 canvas?

適切に一時的なキャンバスをサイズにして、内容を変換します

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