在HTML5中：如何将画布中心的图像旋转360度，使其他对象静止 我试图创建一个动画，其中画布中间的图像必须旋转360度，同时将其他物体固定在画布上，基本上我想给图像提供扇形旋转效果，但在我的情况下它不起作用。

假设画布大小为400 x 200

 var surface;
 var img = new Image();
 var angle = 0;
 img.src = "images/teddy.png";
 surface = document.getElementById("canvas");
 var ctx = surface.getContext('2d');

 // Clear the canvas to White
ctx .fillStyle = "rgb(255,255,255)";
ctx .fillRect(0, 0, surface.width, surface.height);
// Save the current context
ctx .save();
// Translate to the center point of our image
ctx .translate(happy.width * 0.5, happy.height * 0.5);
ctx .rotate(DegToRad(angle,surfaceContext)); //calling function here  
ctx .translate(-(happy.width * 0.5), -(happy.height * 0.5));
ctx .drawImage(happy, 200, 100);
angle++;
ctx.restore();

使用setInterval（循环，10）调用上述代码

它在x轴上的位置200px上旋转直径为100px的图像，但我想要的是图像应该在其当前位置上保持旋转

我是HTML5新手，所以请容忍我：）

谢谢

---

~Simer

我想这就是你想要的：

​

是的，这正是我想要的，但我想用其他方法来实现，而不需要“reqAnimFrame”。所以我设法用另一种方式做了。看看这个

var render, loop, t, dt,
    DEG2RAD = Math.PI / 180,
    cvs = document.querySelector('canvas'),
    ctx = cvs.getContext('2d'),
    teddy = new Image(),
    heart = new Image(),
    angle = 0,
    reqAnimFrame = 
        window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        window.oRequestAnimationFrame;

cvs.width = 400;
cvs.height = 200;

teddy.src = 'https://d3qcduphvv2yxi.cloudfront.net/assets/1204584/view_small/43b95bee9e4e9a8a1effcdc3d401774a.jpg';

heart.src = 'http://a.dryicons.com/files/graphics_previews/flower_heart.jpg';

render = function (timestamp) {
    dt = timestamp - t;
    t = timestamp;

    // Clear the canvas to White
    ctx.fillStyle = "rgb(255,255,255)";
    ctx.fillRect(0, 0, cvs.width, cvs.height);

    // draw heart
    ctx.drawImage(heart, -20, -120);

    // draw teddy
    ctx.save();
    ctx.translate(cvs.width/2, cvs.height/2); // move cursor to canvas center
    ctx.rotate(DEG2RAD * angle); // rotate canvas
    ctx.drawImage(teddy, -teddy.width/2, -teddy.height/2); // draw img center at cursor center
    angle += dt / 16.67 * 6; // increment angle ~ 360 deg/sec
    ctx.restore();
};

loop = function (timestamp) {
    reqAnimFrame(loop);
    render(timestamp);
};

t = Date.now();
loop(t);