画布中的多个图像html

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

我是否需要在单个画布上绘制它们，并以某种方式在画布中以不同方式旋转它们，还是应该为每个图像创建不同的画布？一次我创建不同的画布的每个图像，它显示只有最后一个图像和画布是一个挨着另一个不平行的领域..

谢谢...

2011-03-23 user670901

这里您可以使用什么？ http://stackoverflow.com/questions/3878319/combining-two-images-on-one-canvas-in-html5 – mplungjan 2011-03-23 13:13:24

你想要的东西的视觉例子将有所帮助。 – 2011-03-23 18:20:21

你会介意标记我的答案是正确的吗？ – towc 2016-06-07 06:59:33

帆布有那些非常有用的变换是您可以使用。你现在要做的是帆布的.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处绘制图像。现在，我们必须去旋转和去平移才能将画布转换为原始变换;）

来源

2015-10-30 08:53:44 towc

画布中的多个图像html

回答

相关问题