如何重新調整畫布大小並在畫布上繪製圖像作爲透視窗口大小

-1

我是新的html5開發人員，開發了html5 web應用程序。在這個網頁應用程序中，所有動畫對象都顯示在畫布上。我想用響應式用戶界面調整所有資產。根據瀏覽器更改畫布高度和寬度，但畫布大小的子項仍不會根據畫布更改。如何重新調整畫布大小並在畫布上繪製圖像作爲透視窗口大小

如何重新調整畫布的大小並在畫布上繪製對象，當窗口大小發生變化時 ??。

因此，所有在畫布中的孩子都會通過響應式UI重新調整大小或縮放比例。

還有一件事，當我在窗口大小上更改畫布高度和寬度時，所有孩子都從畫布上移除。我無法理解。爲什麼資產被刪除？

請幫助我，這是緊急的。

謝謝Q.

來源

2013-06-29 Harish Patidar

這個問題的答案http://stackoverflow.com/questions/5517783/pre當調整窗口大小時透氣畫布清晰會提供一些幫助。發佈你的一些代碼也將有助於查明錯誤 – jing3142

它是怎樣的posibile：當我在窗口大小上更改畫布高度和寬度時，所有孩子都從畫布上移除。爲什麼資產被刪除？ –

@HarishPatidar畫布上沒有兒童的東西。畫布是被動的，不知道你在畫什麼。您需要跟蹤和維護自己繪製的內容並重新調整大小。 – K3N

畫布是一個位圖區域，當您在畫布上繪製某些東西時，瀏覽器只會記住生成的位圖。

當您通過更改canvas.width或canvas.height屬性調整畫布分辨率時，畫布將被清除，所有位圖信息將丟失。因此，如果您不想放鬆位圖信息，則需要一些策略來記住位圖信息，調整畫布大小，然後在調整大小的畫布上重繪。

CLICK HERE TO VIEW AN EXAMPLE

或者，你可以把畫布一個div容器內，並通過CSS調整DIV：

container.style.width = newWidthValue + "px"; 
container.style.height = newHeightValue + "px";

這樣你就不需要記住什麼被畫上畫布和輕鬆調整畫布大小，不會有任何損失。

CLICK HERE TO VIEW AN EXAMPLE

在這兩個例子上面，你可以通過設置

var stretch_to_fit = false;

保持圖像的長寬比，或者如果你不關心長寬比只是設置變量設置爲true

var stretch_to_fit = true;

來源

2013-07-01 16:23:20

@Ken - AbdiasSoftware：在畫布上，如果我畫一個圖像。像

var c = $('#respondCanvas'); 
var ct = c.get(0).getContext('2d'); 

var imageObj = new Image(); 

imageObj.onload = function() { 
    ct.drawImage(imageObj, 0, 0); 
    }; 

imageObj.src = 'img/ballon.jpg';

現在調整畫布的每個窗口大小調整，到時候圖像不重新調整大小和也拆除帆布。請告訴我，爲什麼圖像沒有調整大小，爲什麼它從畫布上移除？

如果我刷新瀏覽器而不是圖像在畫布上可見，但圖像比例仍然相同。

來源

2013-07-01 04:31:52

如何重新調整畫布大小並在畫布上繪製圖像作爲透視窗口大小

回答

相關問題