畫布中的多個圖像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

回答

相關問題