Girar una imagen alrededor de su centro en la lona

Question

Estoy tratando de hacer mi primera animación de imágenes sobre lienzo. Quiero que la imagen rote pero algo no es correcto en mi código. ¿Algunas ideas? Todo esto está en un documento listo jQuery:

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

    var img = new Image();   // Create new Image object
    img.src = 'images/containerbg.png'; // Set source path // set img src

    img.onload = function(){ // when image loads
        ctx.drawImage(img,0,0);
        setInterval(function() {
            ctx.save();
            ctx.clearRect(-ctx.canvas.width/2, -ctx.canvas.height/2, ctx.canvas.width, ctx.canvas.height);
            ctx.drawImage(img,0,0);
            ctx.translate(ctx.canvas.width/2, ctx.canvas.height/2); // set canvas context to center
            ctx.rotate(Math.PI / 180 * 0.5); // 1/2 a degree
            ctx.restore();
        }, 16);
    }

Answer 1

acaba de cambiar el orden de su código, es decir.,

ctx.rotate(...);

ctx.drawImage(...);

Ver un ejemplo de trabajo http://jsbin.com/owuyiq/

$(function () {
    var canvas = document.getElementById('logobg1');
    var ctx = canvas.getContext('2d');
    var img = new Image();

    var ang = 0; //angle
    var fps = 1000 / 25; //number of frames per sec
    img.onload = function () { //on image load do the following stuff
        canvas.width = this.width << 1; //double the canvas width
        canvas.height = this.height << 1; //double the canvas height
        var cache = this; //cache the local copy of image element for future reference
        setInterval(function () {
            ctx.save(); //saves the state of canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height); //clear the canvas
            ctx.translate(cache.width, cache.height); //let's translate
            ctx.rotate(Math.PI / 180 * (ang += 5)); //increment the angle and rotate the image 
            ctx.drawImage(img, -cache.width / 2, -cache.height / 2, cache.width, cache.height); //draw the image ;)
            ctx.restore(); //restore the state of canvas
        }, fps);
    };

    img.src = 'http://i.stack.imgur.com/Z97wf.jpg?s=128'; //img
});

Answer 2

Con base en la respuesta aceptada, este ejemplo, le permite usar un tamaño de lienzo fijo (y no en relación con el tamaño de la imagen):

 $(function() {
 
        var canvas = document.getElementById('logobg1');
        var ctx = canvas.getContext('2d');
        var img = new Image();
    
        var ang = 0; //angle
        var fps = 1000 / 25; //number of frames per sec
        img.onload = function () { //on image load do the following stuff
            canvas.width = 500; //Any width
            canvas.height = 500; //Any height
            var cache = this; //cache the local copy of image element for future reference
            var iw = cache.width;
            var ih = cache.height;
            setInterval(function () {
                ctx.save(); //saves the state of canvas
                ctx.clearRect(0, 0, canvas.width, canvas.height); //clear the canvas
                ctx.translate(canvas.width/2, canvas.height/2); //let's translate
                ctx.rotate(Math.PI / 180 * (ang += 5)); //increment the angle and rotate the image 
                ctx.translate(-(canvas.width/2), -(canvas.height/2)); //let's translate
                ctx.drawImage(img, canvas.width/2 - iw/2, canvas.height/2 - ih/2, iw, ih); //draw the image ;)
                ctx.restore(); //restore the state of canvas
            }, fps);
        };
        
        img.src = 'https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300'; //img
 
 })
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<canvas id="logobg1" > test canvas <canvas>

Ejemplo de Trabajo: jsbin.com/suwovibove/

Nota:. ctx.save intente quitar y ctx.restore para dar una vuelta simpático

Answer 3

A partir de los comentarios anteriores, pero un poco más simple y la vainilla. Éste me funcionó perfectamente. Por supuesto que puedes usar clearRect el fin de borrar el lienzo en cada representación.

var canvas = document.querySelector('#my-canvas');
var ctx = canvas.getContext('2d')
var ang = 0

function rotateAndRenderImg() {
    var img = document.querySelector('img')
    ctx.save()
    var pos = {x: desiredRenderPosX, y: desiredRenderPosY}
    ctx.translate(pos.x ,pos.y)    
    ctx.rotate(Math.PI / 180 * (ang += 5))
    ctx.drawImage(img, -img.width / 2, -img.height / 2, img.width, img.height)
    ctx.restore()
}