在画布中围绕图像中心旋转图像

Question

我正在尝试在画布上制作我的第一个图像动画。我希望图像旋转，但我的代码中有些东西不正确。有什么想法吗？这一切都在 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

只需更改代码的顺序，即

ctx.rotate(...);

ctx.drawImage(...);

查看工作示例http://jsbin.com/owuyiq/< /a>

$(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 = 'https://i.sstatic.net/Z97wf.jpg?s=128'; //img
});

Answer 2

基于上面的评论，但更简单，更普通。这对我来说非常有效。
当然，您应该使用clearRect来擦除每次渲染时的画布。

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

Answer 3

根据已接受的答案，此示例允许您使用固定的画布大小（与图像大小无关）：

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

工作示例： jsbin.com/suwovibove/

注意：尝试删除 ctx.save 和 ctx.restore 带来酷炫的旋转。