canvas实现图片的旋转以及平移

要在canvas中实现图片的旋转和平移，可以使用canvas的变换(transform)功能。

平移：

使用canvas的translate()方法，将画布的原点移动到指定的位置，再绘制图像。例如，将画布向右平移50像素，向下平移100像素：

ctx.translate(50, 100);
ctx.drawImage(img, 0, 0);

旋转：

使用canvas的rotate()方法，将画布旋转指定的角度，再绘制图像。例如，将画布旋转45度：

ctx.rotate(Math.PI / 4);
ctx.drawImage(img, 0, 0);

同时旋转和平移：

可以先平移，再旋转，或者先旋转，再平移，效果是一样的。例如，将画布先向右平移50像素，再向下平移100像素，然后旋转45度：

ctx.translate(50, 100);
ctx.rotate(Math.PI / 4);
ctx.drawImage(img, 0, 0);

注意：变换是累加的，即后一次变换会在前一次变换的基础上进行。如果需要还原画布状态，可以使用canvas的save()和restore()方法，将画布状态保存和恢复。例如：

ctx.save();  // 保存画布状态
ctx.translate(50, 100);
ctx.rotate(Math.PI / 4);
ctx.drawImage(img, 0, 0);
ctx.restore();  // 恢复画布状态，回到原点