如何在 html 5 画布上旋转单个对象？

我试图弄清楚如何在 html 5 画布上旋转单个对象。

例如：http://screencast.com/t/NTQ5M2E3Mzct http://screencast.com/t/NTQ5M2E3Mzct- 我希望每一张卡都能以不同的角度旋转。

到目前为止，我所看到的只是演示旋转整个画布的方法的文章和示例。现在，我猜我必须旋转画布，绘制图像，然后将画布旋转回原始位置，然后再绘制第二个图像。如果是这样的话，请告诉我！我只是有一种感觉还有另一种方法。

有人有什么想法吗？

我在最近的一个项目中遇到了同样的问题（我把旋转的外星人踢得到处都是）。我只是使用了这个不起眼的函数，它做同样的事情，并且可以以与 ctx.rotate 相同的方式使用，但可以传递一个角度。对我来说效果很好。

function drawImageRot(img,x,y,width,height,deg){
    // Store the current context state (i.e. rotation, translation etc..)
    ctx.save()

    //Convert degrees to radian 
    var rad = deg * Math.PI / 180;

    //Set the origin to the center of the image
    ctx.translate(x + width / 2, y + height / 2);

    //Rotate the canvas around the origin
    ctx.rotate(rad);

    //draw the image    
    ctx.drawImage(img,width / 2 * (-1),height / 2 * (-1),width,height);

    // Restore canvas state as saved from above
    ctx.restore();
}

耶，我的第一个答案！