Drehen eines Bildes um seinen Mittelpunkt in Leinwand

Question

Ich versuche, meine erste Bild-Animation auf der Leinwand zu tun. Ich möchte das Bild drehen, aber etwas ist in meinem Code nicht korrekt. Irgendwelche Ideen? Das ist alles in einem jquery Dokument bereit:

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

nur die Reihenfolge des Code ändern, d.h.

ctx.rotate(...);

ctx.drawImage(...);

Sehen Sie ein funktionsfähiges Beispiel 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

Mit Sitz in der akzeptierten Antwort, in diesem Beispiel, ermöglicht es Ihnen, eine feste Leinwand Größe zu verwenden (und nicht in Bezug auf die Bildgröße):

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

Arbeits Beispiel: jsbin.com/suwovibove/

. Hinweis: versuchen ctx.save und ctx.restore für einen kühlen Spin Entfernen

Answer 3

Auf der Grundlage der obigen Ausführungen, aber ein bisschen einfacher und in Vanille. Dieser arbeitete für mich perfekt. Natürlich sollten Sie clearRect, um auf jedem Rendering verwenden, um die Leinwand zu löschen.

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