Come ruoto un singolo object su una canvas html 5?

Sto cercando di capire come ruotare un singolo object su una canvas html 5.

Ad esempio: http://screencast.com/t/NTQ5M2E3Mzct – Voglio che ciascuna di queste carte sia ruotata in un altro modo.

Finora, tutto ciò che ho visto sono articoli ed esempi che dimostrano come ruotare l’intera canvas. In questo momento, suppongo che dovrò ruotare la canvas, disegnare un’immagine e quindi ruotare la canvas nella sua posizione originale prima di disegnare la seconda immagine. Se è così, allora fammelo sapere! Ho solo la sensazione che ci sia un altro modo.

Qualcuno ha qualche idea?

Grazie in anticipo!

Sfortunatamente nell’elemento canvas HTML5 non puoi ruotare i singoli elementi.

L’animazione funziona come il disegno in MS Paint: disegni qualcosa, crei uno schermo .. usa la gomma per rimuovere alcune cose, disegna qualcosa in modo diverso, crea uno schermo .. Disegna qualcos’altro sopra, crea uno schermo, ecc. Ecc.

Se si dispone di un elemento esistente ctx.fillRect() sarà necessario cancellarlo (utilizzare ctx.fillRect() o clearRect() per esempio), quindi disegnare l’object ruotato.

Se non sei sicuro di come ruotarlo mentre si disegna in primo luogo:

 ctx.save(); ctx.rotate(0.17); // draw your object ctx.restore(); 

Mi sono imbattuto nello stesso problema in un recente progetto (in cui ho calciato alieni rotanti dappertutto). Ho appena usato questa funzione umile che fa la stessa cosa e può essere utilizzata allo stesso modo di ctx.rotate ma può essere superata con un angolo. Funziona bene per me.

 function drawImageRot(img,x,y,width,height,deg){ //Convert degrees to radian var rad = deg * Math.PI / 180; //Set the origin to the center of the image ctx.translate(x + width / 2, y + height / 2); //Rotate the canvas around the origin ctx.rotate(rad); //draw the image ctx.drawImage(img,width / 2 * (-1),height / 2 * (-1),width,height); //reset the canvas ctx.rotate(rad * ( -1 ) ); ctx.translate((x + width / 2) * (-1), (y + height / 2) * (-1)); } 

Yay, la mia prima risposta!

Per ruotare un singolo object devi impostare la matrice di trasformazione. Questo è veramente semplice:

   You do not have a canvas enabled browser    

Fondamentalmente, per far ruotare correttamente un object senza avere altra forma che gira intorno, è necessario:

  1. salva il contesto: ctx.save ()
  2. sposta il punto di rotazione nella posizione desiderata: ctx.translate (200, 200);
  3. disegna la forma, lo sprite, qualunque cosa: ctx.draw …
  4. resettare il pivot: ctx.translate (-200, -200);
  5. ripristinare il contesto allo stato originale: ctx.restore ();

Le forms disegnate al di fuori della lista sopra menzionata non saranno influenzate. Spero possa essere d’aiuto.

Questo codice html / javascript potrebbe far luce sulla questione:

     your browser does not support the canvas tag     

Trovo utile vedere la matematica relativa alla rotazione, spero che questo sia stato utile anche a te.

        

Per ruotare un object puoi usare il metodo rotate () . Ecco l’esempio di come ruotare un object rettangular a 135 gradi in senso orario.

    

Ecco la demo e puoi provare tu stesso: http://okeschool.com/examples/canvas/html5-canvas-rotate

Ho trovato questa domanda perché avevo un mucchio di roba su una canvas, disegnato con linee di canvas, accuratamente, e poi ho deciso che alcuni di essi dovevano essere ruotati. Non volendo fare ancora un sacco di cose complesse volevo ruotare ciò che avevo. Una soluzione semplice che ho trovato è stata questa:

 ctx.save(); ctx.translate(x+width_of_item/2,y+height_of_item/2); ctx.rotate(degrees*(Math.PI/180)); ctx.translate(-(x+width_of_item/2),-(y+height_of_item/2)); // THIS IS THE STUFF YOU WANT ROTATED // do whatever it is you need to do here, moveto and lineto is all i used // I would expect anything to work. use normal grid coordinates as if its a // normal 0,0 in the top left kind of grid ctx.stroke(); ctx.restore(); 

Ad ogni modo – potrebbe non essere particolarmente elegante ma è un modo facile e agevole per ruotare un elemento particolare sulla canvas.

Guarda tutti quegli elementi ruotati!