javascript void(0);javascript:void(0); - ¿Lienzo gira desde el ángulo inferior de la imagen central?




2 Answers

Primero debes traducir al punto alrededor del cual te gustaría rotar. En este caso, las dimensiones de la imagen son 64 x 120. Para girar alrededor del centro inferior, quiere traducir a 32, 120.

ctx.translate(32, 120);

Eso te lleva al centro inferior de la imagen. Luego, rota el lienzo:

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

Que giran 90 grados

Luego, cuando dibujas la imagen, prueba esto:

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

? ¿Eso funciona?

=' href

¿Cómo se rota una imagen con el elemento canvas html5 desde el ángulo central inferior?

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

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

Editar: al final, el objeto (nave espacial) tiene que rotar como un puntero de reloj, como si estuviera girando a la derecha / izquierda.




Lo he usado cuando necesitaba rotar 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();



Related

javascript html5 canvas rotation