canvas html中的多个图像

Question

我需要在一些平行区域显示一些图像，这些图像将在另一个之上。 如果每个图像都应该以不同的角度旋转并位于不同的坐标（x，y）中，那么正确的方法是什么？

我是否需要在单个画布上绘制它们并以某种方式在该画布中以不同方式旋转它们，还是应该为每个图像创建不同的画布？ 一旦我为每个图像创建了不同的画布，它只显示最后一张图像，并且画布彼此相邻，没有平行区域..

谢谢...

Answer 1

canvas 具有您可以使用的非常有用的变换。 你现在需要的是canvas'.translate和.rotate

假设您创建了一个函数，该函数将img 图像、x 坐标、y 坐标和rad 旋转到您的左上角参数，这就是您的做法：

function displayRotatedImage( img, x, y, rad ){

    ctx.translate( x, y ); // ctx is your canvas context
    ctx.rotate( rad );
    ctx.drawImage( img, 0, 0 );
    ctx.rotate( -rad ); // don't forget to get everything to its previous state!
    ctx.translate( -x, -y );


}

你知道发生了什么吗？首先，我们使用.translate 移动到旋转的支点，然后我们使用.rotate 围绕该支点旋转，并且我们相对于我们的系统绘制我们的图像，并且由于 0 0 现在是我们的支点，这要归功于翻译，我们只是在 0 0 处绘制图像。现在我们必须反旋转和反翻译以使画布恢复到原来的变换；）