Question

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

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

...谢谢

Answer 1

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.现在我们必须进行反转和反转换以获得画布的原始变换;）

画布html中的多个图像

1 个答案: