Come ruotare il contenuto esistente della canvas HTML5?

C'è un modo per ruotare il contenuto esistente della canvas HTML5 con Javascript? So che è ansible ruotare un'image che verrà disegnata su canvas, ma voglio ruotare il contenuto che è stato disegnato su canvas, ad esempio un angolo 200×200 di una canvas 400×400 o una regione specifica di una canvas esistente .

Stessa domanda per scalare il contenuto della canvas esistente …

So che getImageData / putImageData fornisce un potenziale per trasformare l'arrays di pixel, ma è troppo lento e inefficiente.

E 'abbastanza facile da fare con una canvas di temp.

Live Demo

Live Demo animato (solo per il pazzo di esso)

L'esempio precedente disegna 2 scatole, poi ruota e scala da 0,0 a 200,200

var canvas = document.getElementById("canvas"), ctx = canvas.getContext("2d"); canvas.width = canvas.height = 400; // fill the canvas black, and draw 2 boxes ctx.fillStyle = "#000"; ctx.fillRect(0,0,400,400); ctx.fillStyle = "rgb(255,0,0)"; ctx.fillRect(10,10,190,190); ctx.fillStyle = "rgb(255,255,0)"; ctx.fillRect(250,250,90,90); // Create a temp canvas to store our data (because we need to clear the other box after rotation. var tempCanvas = document.createElement("canvas"), tempCtx = tempCanvas.getContext("2d"); tempCanvas.width = canvas.width; tempCanvas.height = canvas.height; // put our data onto the temp canvas tempCtx.drawImage(canvas,0,0,canvas.width,canvas.height); // Append for debugging purposes, just to show what the canvas did look like before the transforms. document.body.appendChild(tempCanvas); // Now clear the portion to rotate. ctx.fillStyle = "#000"; ctx.fillRect(0,0,200,200); ctx.save(); // Translate (190/2 is half of the box we drew) ctx.translate(190/2, 0); // Scale ctx.scale(0.5,0.5); // Rotate it ctx.rotate(45*Math.PI/180); // Finally draw the image data from the temp canvas. ctx.drawImage(tempCanvas,0,0,200,200,10,10,190,190); ctx.restore(); 

Se si desidera prima disegnare su una canvas e poi ruotarlo per l'uso ad angoli ad esempio, è ansible quando si "clona" la canvas o usando CSS.

Esempi

Ottieni il primo elemento della canvas:

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

disegnare su di esso:

 ctx.fillStyle = 'blue'; ctx.fillRect(0,0, 25, 5); ctx.fill(); ctx.fillStyle = 'red'; ctx.fillRect(25, 0, 25, 5); ctx.fill(); 

clonarlo ad un'altra canvas (che è ruotata da CSS):

 var ctx2 = document.getElementById("canvas2").getContext("2d"); ctx2.drawImage(canvas, 0,0); 

o ruotare la canvas mentre "clona":

 var ctx3 = document.getElementById("canvas3").getContext("2d"); ctx3.rotate(Math.PI/2); ctx3.translate(0,-50); ctx3.drawImage(canvas, 0,0); 

ecco il CSS per la rotazione:

 #canvas2 { -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -o-transform:rotate(90deg); -ms-transform:rotate(90deg); } 

immettere qui la descrizione dell'immagine

Ecco l'esempio completo:

 <!DOCTYPE html> <html> <head> <script> window.onload = function() { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = 'blue'; ctx.fillRect(0,0, 25, 5); ctx.fill(); ctx.fillStyle = 'red'; ctx.fillRect(25, 0, 25, 5); ctx.fill(); var ctx2 = document.getElementById("canvas2").getContext("2d"); ctx2.drawImage(canvas, 0,0); var ctx3 = document.getElementById("canvas3").getContext("2d"); ctx3.rotate(Math.PI/2); ctx3.translate(0,-50); ctx3.drawImage(canvas, 0,0); } </script> <style> #canvas2 { -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -o-transform:rotate(90deg); -ms-transform:rotate(90deg); } </style> </head> <body> <canvas id="canvas" width="50" height="50"></canvas> <canvas id="canvas2" width="50" height="50"></canvas> <canvas id="canvas3" width="50" height="50"></canvas> </body> </html>