¿Lienzo gira desde el ángulo inferior de la imagen central?

¿Cómo girar una imagen con el elemento HTML5 Canvas desde el ángulo inferior central?¿Lienzo gira desde el ángulo inferior de la imagen central?

<html> 
    <head> 
     <title>test</title> 
     <script type="text/javascript"> 
      function startup() { 
       var canvas = document.getElementById('canvas'); 
       var ctx = canvas.getContext('2d'); 
       var img = new Image(); 
       img.src = 'player.gif'; 
       img.onload = function() { 
        ctx.translate(185, 185); 
        ctx.rotate(90 * Math.PI/180); 
        ctx.drawImage(img, 0, 0, 64, 120); 
       } 
      } 
     </script> 
    </head> 
    <body onload='startup();'> 
     <canvas id="canvas" style="position: absolute; left: 300px; top: 300px;" width="800" height="800"></canvas> 
    </body> 
</html>

Lamentablemente, esto parece rotarlo desde el ángulo superior izquierdo de la imagen. ¿Alguna idea?

Editar: al final del objeto (nave espacial) tiene que girar como un puntero de reloj, como si se gira a la derecha/izquierda.

Fuente

2008-12-13 Tom

http://code.google.com/p/explorercanvas/ Se le sumará un gran soporte de los navegadores cruz, no es lo mismo ya que para IE realidad se va a utilizar VML –

Véase también [Usando HTML5 Canvas para girar la imagen sobre el punto arbitrario] (http://stackoverflow.com/questions/4649836/using-html5-canvas-rotate-image-about-arbitrary-point) – Phrogz

Primero se tiene que traducir al punto en torno al cual desea rotar. En este caso las dimensiones de imagen son 64 x 120. Para girar alrededor de la parte inferior central que desea traducir a 32, 120.

ctx.translate(32, 120);

que te lleva a la parte inferior central de la imagen. Luego gire el lienzo:

ctx.rotate(90 * Math.PI/180);

que giran 90 grados.

A continuación, cuando se dibuja la imagen intente esto:

ctx.drawImage(img, -32, -120, 64, 120);

? ¿Eso funciona?

Fuente

2008-12-13 16:51:04

Realmente increíble: gracias de nuevo. Creo que ahora me estoy acostumbrando. – Tom

Actualización: hay un problema, sin embargo, el lado izquierdo se está cortada debido ot el ancho creo. ¿Hay alguna manera de arreglar eso pero aún así tener este gran ángulo? – Tom

Parece que lo arreglé configurando ctx.translate (232, 120); - estableciendo su respuesta como respuesta aceptada :) – Tom

La respuesta correcta es, por supuesto, uno de Vincent.
Busqué un poco con esta cosa rotación/traslación, y creo que mis pequeños experimentos podrían ser interesantes para mostrar:

<html> 
    <head> 
    <title>test</title> 
    <script type="text/javascript"> 
    canvasW = canvasH = 800; 
    imgW = imgH = 128; 
    function startup() { 
     var canvas = document.getElementById('canvas'); 
     var ctx = canvas.getContext('2d'); 
     // Just to see what I do... 
     ctx.strokeRect(0, 0, canvasW, canvasH); 
     var img = new Image(); 
     img.src = 'player.png'; 
     img.onload = function() { 
     // Just for reference 
     ctx.drawImage(img, 0, 0, 128, 128); 
     ctx.drawImage(img, canvasW/2 - imgW/2, canvasH/2 - imgH/2, 128, 128); 
     mark(ctx, "red"); 
     // Keep current context (transformations) 
     ctx.save(); 
     // Put bottom center at origin 
     ctx.translate(imgW/2, imgH); 
     // Rotate 
     // Beware the next translations/positions are done along the rotated axis 
     ctx.rotate(45 * Math.PI/180); 
     // Mark new origin 
     mark(ctx, "red"); 
     // Restore position 
     ctx.translate(-imgW/2, -imgH); 
     ctx.drawImage(img, 0, 0, imgW, imgH); 
     mark(ctx, "green"); 
     // Draw it an wanted position 
     ctx.drawImage(img, canvasW/2, canvasH/3, imgW, imgH); 
     // Move elsewhere: 
     ctx.translate(canvasW/2, canvasH/2); 
     ctx.drawImage(img, 0, 0, imgW, imgH); 
     mark(ctx, "blue"); 
     ctx.restore(); 
     } 
    } 
    function mark(ctx, color) { 
    ctx.save(); 
//~  ctx.fillStyle = color; 
//~  ctx.fillRect(-2, -2, 4, 4); 
    ctx.strokeStyle = color; 
    ctx.strokeRect(0, 0, imgW, imgH); 
    ctx.restore(); 
    } 
    </script> 
    </head> 
    <body onload='startup();'> 
    <canvas id="canvas" style="position: absolute; left: 300px; top: 300px;" width="800" height="800"></canvas> 
    </body> 
</html>

Mi problema tropiezo fue que el posicionamiento de la figura rotada es difícil, ya que es a lo largo del girada axis: o bien tenemos que hacer un poco de matemática para pintar en el origen primitivo, o tenemos que dibujar en un lienzo oculto secundario y luego pintarlo en el objetivo.
A menos que alguien tiene una idea mejor?

Fuente

2008-12-14 10:01:19 PhiLho

-1

<html> 
    <head> 
    <title>Canvas Pinball flippers by stirfry</title> 
    <script type="application/x-javascript"> 
    /*THIS SCRIPT ADAPTED BY STIRFRY. SOURCE TEETHGRINDER no warranty or liability implied or otherwise. use at your own risk. No credit required. Enjoy.stirfry.thank(you)*/ 
    var img = new Image(); 
          //img.src = "flipper.gif";//right 
    img.src="http://i39.tinypic.com/k1vq0x.gif" 
    var img2 = new Image(); 
          //img2.src = "flipper2.gif";//left 
    img2.src ="http://i42.tinypic.com/14c8wht.gif" 
    var gAngle = 0; 
    gAngle = 60; 
    stop = false; 
    inertia = .8; 
    vel = 10; 
    k = 0.1; 

    function drawagain(){ 
     gAngle = 60; 
     stop = false; 
     inertia = .8; 
     vel = 10; 
     k = 0.1; 
    draw() 
    } 

    function draw(){ 
    var ctx = document.getElementById('canvas').getContext('2d'); 
    ctx.save(); 

     vel = (vel * inertia) + (-gAngle * k); 

     gAngle += vel; 

     ctx.fillStyle = 'rgb(255,255,255)'; 
     ctx.fillRect (0, 0, 600, 600); 

     ctx.translate(380, 480);    //location of the system 
     ctx.rotate(gAngle * Math.PI/180);//rotate first then draw the flipper 
     ctx.drawImage(img, -105, -16); 
ctx.restore(); 
ctx.save(); 
     ctx.translate(120, 480);    //location of the system 
     ctx.rotate(-1*gAngle * Math.PI/180);//rotate first then draw the flipper 
     ctx.drawImage(img2, -18, -16); 

ctx.restore(); 

     if(!stop) 
      setTimeout(draw, 30); 
     } 

    </script> 
    <style type="text/css"> 
     body { margin: 20px; font-family: arial,verdana,helvetica; background: #fff;} 
     h1 { font-size: 140%; font-weight:normal; color: #036; border-bottom: 1px solid #ccc; } 
     canvas { border: 2px solid #000; float: left; margin-right: 20px; margin-bottom: 20px; } 
     pre { float:left; display:block; background: rgb(238,238,238); border: 1px dashed #666; padding: 15px 20px; margin: 0 0 10px 0; } 
     .gameLayer {position: absolute; top: 0px; left: 0px;} 
     #scoreLayer {font-family: arial; color: #FF0000; left: 10px; font-size: 70%; } 
     #windowcontainer {position:relative; height:300px;} 
    </style> 
    </head> 

    <body onload="draw()"> 
    <div id="windowcontainer"> 
     <canvas id="canvas" width="500" height="500"></canvas> 
     <INPUT VALUE="flip" TYPE=BUTTON onClick="drawagain();"><br/> 
    </div> 

    </body> 
</html>

Fuente

2009-01-07 23:04:03

Su ejemplo contiene errores. –

He utilizado esto, cuando necesitaba rotar los textos comenzados desde su punto específico (centro)?

ctx.save(); 
ctx.translate(x,y); 
ctx.rotate(degree*Math.PI/180); 
ctx.translate(-x,-y); 
ctx.fillText(text,x,y); 
ctx.stroke(); 
ctx.restore();

Fuente

2013-04-04 18:40:38

¿Lienzo gira desde el ángulo inferior de la imagen central?

Respuesta

Cuestiones relacionadas