Come ruoto un singolo oggetto su una tela html 5?

Sto cercando di capire come ruotare un singolo oggetto su un foglio di html 5.Come ruoto un singolo oggetto su una tela html 5?

Ad esempio: http://screencast.com/t/NTQ5M2E3Mzct - Desidero che ciascuna di queste schede venga ruotata in un altro modo.

Finora, tutto ciò che ho visto sono articoli ed esempi che dimostrano come ruotare l'intera tela. In questo momento, suppongo che dovrò ruotare la tela, disegnare un'immagine e quindi ruotare la tela 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!

fonte

2010-04-20 Kappers

Sfortunatamente nell'elemento canvas HTML5 non è possibile ruotare i singoli elementi.

L'animazione funziona come il disegno in MS Paint: si disegna qualcosa, si crea uno schermo .. si usa la gomma per rimuovere alcune cose, disegnare qualcosa in modo diverso, creare uno schermo .. Disegnare qualcos'altro in cima, creare uno schermo .. ecc. ecc.

Se si dispone di un elemento esistente nell'area di disegno, è necessario cancellarlo (ad esempio, utilizzare ctx.fillRect() o clearRect()) e quindi disegnare l'oggetto ruotato.

Se non siete sicuri di come ruotare, mentre il disegno in primo luogo:

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

fonte

2010-04-20 18:47:25

Bummer! Immagino che dovrò fare, Artiom! Grazie per la risposta! – Kappers

Sì, lo so .. quando scrivi animazioni più complesse questo problema diventa ancora più grande, perché devi ridisegnare l'intera tela da zero con ciascun fotogramma :) –

Suggerisci di sostituire 'fillRect()' con 'clearRect()' nel tuo risposta. – Phrogz

Per ruotare un oggetto individuo è necessario impostare la matrice di trasformazione. Questo è veramente semplice:

<body> 
    <canvas width="1280" height="720" id="pageCanvas"> 
     You do not have a canvas enabled browser 
    </canvas> 
    <script> 
     var context = document.getElementById('pageCanvas').getContext('2d'); 
     var angle = 0; 
     function convertToRadians(degree) { 
      return degree*(Math.PI/180); 
     } 

     function incrementAngle() { 
      angle++; 
      if(angle > 360) { 
       angle = 0; 
      } 
     } 

     function drawRandomlyColoredRectangle() { 
      <!-- clear the drawing surface --> 
      context.clearRect(0,0,1280,720); 
      <!-- you can also stroke a rect, the operations need to happen in order --> 
      incrementAngle(); 
      context.save();     
      context.lineWidth = 10; 
      context.translate(200,200); 
      context.rotate(convertToRadians(angle)); 
      <!-- set the fill style --> 
      context.fillStyle = '#'+Math.floor(Math.random()*16777215).toString(16); 
      context.fillRect(-25,-25,50,50); 
      context.strokeRect(-25,-25,50,50);     
      context.restore(); 
     } 

     setInterval(drawRandomlyColoredRectangle, 20); 
    </script> 
</body>

fonte

2011-02-06 03:35:59

Questo html/javascript codice potrebbe far luce sulla questione:

<!DOCTYPE html> 
<html> 
<body> 

<canvas id="myCanvas" width="233" height="233" style="border:1px solid #d3d3d3;"> 
your browser does not support the canvas tag </canvas> 

<script type="text/javascript"> 

var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); 
var canvasWidth=233; 
var canvasHeight=233; 
var rectWidth=100; 
var rectHeight=150; 
var x=30; 
var y=30; 
var translateX= x+(rectWidth/2); 
var translateY= y+(rectHeight/2); 

ctx.fillRect(x,y,rectWidth,rectHeight); 

ctx.translate(translateX,translateY); 
ctx.rotate(5*Math.PI/64); /* just a random rotate number */ 
ctx.translate(-translateX,-translateY); 
ctx.fillRect(x,y,rectWidth,rectHeight); 


</script> 

</body> 
</html>

Trovo utile per vedere la matematica correlato alla rotazione, spero che questo è stato utile anche tu.

fonte

2012-03-04 15:44:55 turbopipp

Mi sono imbattuto nello stesso problema in un progetto recente (dove ho dato dei calci agli 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!

fonte

2012-08-16 10:42:19

Questo dovrebbe essere integrato nella tela. Funziona perfettamente. Grazie per aver condiviso! – Synexis

Questo dovrebbe ora essere contrassegnato come risposta davvero. Peccato che SO non permetta di scegliere una risposta più recente come risposta in un secondo momento. Forse è una cosa che dovrebbe essere presa in considerazione in quanto i cambiamenti tecnologici e le persone escogitano nuove e più corrette risposte. – raddevus

Non sarà possibile causare il degrado dello sfondo se lo si ruota ancora e ancora? – v010dya

Fondamentalmente, per rendere un oggetto ruota in modo corretto senza dover altra forma rotante attorno, è necessario:

salvare il contesto: ctx.save()
spostare il punto di perno nella posizione desiderata: ctx.translate (200, 200);
disegnare la forma, lo sprite, qualunque sia: ctx.draw ...
reimpostare il pivot: ctx.translate (-200, -200);
ripristina il contesto allo stato originale: ctx.restore();

Le forme disegnate al di fuori della lista di cui sopra non saranno interessate. Spero possa essere d'aiuto.

fonte

2012-11-08 01:10:56 TTalt

e che dire della rotazione? Non l'hai mai detto. –

questo era proprio quello che dovevo sapere, grazie! forse se avessi messo la parte in rotazione, avresti ottenuto molti più voti ... – Samuel

<!DOCTYPE html> 
<html> 
<body> 

<canvas id="myCanvas" width="500" height="450" style="border:1px solid #d3d3d3;"> 
</canvas> 

<Button id = "right" onclick = "rotateRight()">Right</option> 
<Button id = "left" onclick = "rotateLeft()">Left</option> 
<script src = "zoom.js"> 

</script> 

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

createRect(); 

function rotateRight() 
{ 
ctx.save(); 
ctx.clearRect(0,0,500,450); 
ctx.translate(c.width/2,c.height/2); 
ctx.rotate(10*Math.PI/180); 
ctx.translate(-c.width/2,-c.height/2); 
createRect(); 

} 

function rotateLeft() 
{ 
ctx.save(); 
ctx.clearRect(0,0,500,450); 
ctx.translate(c.width/2,c.height/2); 
ctx.rotate(-10*Math.PI/180); 
ctx.translate(-c.width/2,-c.height/2); 
createRect(); 
} 



function createRect() 
{ 
ctx.beginPath(); 
ctx.fillStyle = "#AAAA00"; 
ctx.fillRect(250,250,90,50); 
} 
</script> 

</body> 
</html>

fonte

2013-02-18 09:09:22 PGB

Per ruotare un oggetto è possibile utilizzare rotate() metodo. Ecco l'esempio di come ruotare un oggetto rettangolare a 135 gradi in senso orario.

<script> 
    var canvas = document.getElementById('Canvas01'); 
    var ctx = canvas.getContext('2d'); 

    var rectWidth = 100; 
    var rectHeight = 50; 

    //create line 
    ctx.strokeStyle= '#ccc'; 
    ctx.beginPath(); 
    ctx.moveTo(canvas.width/2, 0); 
    ctx.lineTo(canvas.width/2, canvas.height); 
    ctx.stroke(); 
    ctx.closePath(); 

    ctx.beginPath(); 
    ctx.moveTo(0, canvas.height/2); 
    ctx.lineTo(canvas.width, canvas.height/2); 
    ctx.stroke(); 
    ctx.closePath(); 

    // translate ctx to center of canvas 
    ctx.translate(canvas.width/2, canvas.height/2); 

    // rotate the rect to 135 degrees of clockwise 
    ctx.rotate((Math.PI/180)*135); 

    ctx.fillStyle = 'blue'; 
    ctx.fillRect(0, 0, rectWidth, rectHeight); 
</script> 
</body>

Ecco la demo e si può provare da soli: http://okeschool.com/examples/canvas/html5-canvas-rotate

fonte

2014-12-15 22:55:50 MichaelCalvin

Ho trovato questa domanda perché ho avuto un sacco di roba su una tela, disegnato con linee di tela, faticosamente, e poi ha deciso un po ' di loro dovrebbero essere ruotati. Non volendo fare ancora un sacco di cose complesse volevo ruotare ciò che avevo. Una soluzione semplice che ho trovato è stato questo:

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

In ogni caso - potrebbe non essere particolarmente elegante, ma è un modo semplice morto per ruotare un elemento particolare sul vostro tela.

Look at all those rotated elements!

fonte

2016-03-11 11:23:12

Come ruoto un singolo oggetto su una tela html 5?

risposta

Problemi correlati