javascript - 如何在 html 5 Canvas 上旋转单个对象？

Question

我想弄清楚如何在 html 5 Canvas 上旋转单个对象。

例如:http://screencast.com/t/NTQ5M2E3Mzct - 我希望每张卡片都以不同的 Angular 旋转。

到目前为止，我所看到的都是演示旋转整个 Canvas 的方法的文章和示例。现在，我猜我必须旋转 Canvas ，绘制图像，然后在绘制第二幅图像之前将 Canvas 旋转回其原始位置。如果是这样的话，那就告诉我吧!我只是觉得还有另一种方法。

有人知道吗？

提前致谢!

Answer 1

我在最近的一个项目中遇到了同样的问题(我把旋转的外星人踢得到处都是)。我只是使用了这个不起眼的函数，它做同样的事情，可以像 ctx.rotate 一样使用，但可以传递一个 Angular 。对我来说很好。

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

耶，我的第一个答案!