javascript - 如何在 html 5 Canvas 上的圆圈内旋转图片？

Question

我试图让 Logo 在其圆圈内旋转(如果可能，以随机速度旋转)，但我无法实现。

我试过这个:

ctx.save();
ctx.rotate(0.10);

ctx.drawImage(object.image, object.x-object.size/2, object.y-object.size/2, object.size, object.size);

ctx.restore();

但如您所见， Logo 不是在其自身的中心旋转。

笔:https://codepen.io/Le-future/pen/gKNoEE

Answer 1

关键是先translate，然后rotate

在 spawnRandomObject 中

// add the new object to the objects[] array
object.rot = 0;
objects.push(object);

在 animate 中

for (var i = 0; i < objects.length; i++) {
        var object = objects[i];
        object.y += object.speed*0.1;
        object.rot += 0.05; // rotation speed

        ctx.globalAlpha = object.opacite;

        ctx.beginPath();
        ctx.arc(object.x, object.y, object.size/1.25, 0,2*Math.PI);
        ctx.fillStyle = object.couleur;
        ctx.fill();
        ctx.restore();

        ctx.save();

        ctx.translate(object.x, object.y);
        ctx.rotate(object.rot);
        ctx.drawImage(object.image, -object.size/2, -object.size/2, object.size, object.size);

        ctx.restore();
    }

工作叉 https://codepen.io/anon/pen/bjbeoq