調整大小和縮放HTML5畫布和內容

我正在研究將繪圖界面（如Paint或Photoshop）合併爲HTML5畫布元素的應用程序。調整大小和縮放HTML5畫布和內容

我希望能夠動態調整canvas元素及其上的像素數據以模擬縮放功能。我的想法有一些包含畫布元素的視口。然後，我可以調整視圖內的畫布及其內容的大小（保持相同的大小）。

我該如何最好地實現此功能？

2011-08-11 Mark Brouch

相關環節能省「屏幕截圖」使用'.toDataURL（）'，然後調整畫布上，並得出截圖捉襟見肘。然而，它看起來很模糊，因爲畫布不會'像素化'地調整大小。 – pimvdb

可能的重複：http://stackoverflow.com/questions/331052/how-to-resize-html-canvas-element –

通過引入另一個畫布，您可以非常容易地通過從繪圖表面分離顯示來執行此操作。創建一個隱藏的畫布使用

var canvas = document.createElement('canvas');

然後將您的整個場景繪製到此畫布。然後將此畫布的內容繪製到使用drawImage方法（也可能會接收畫布而不是圖像）的用戶實際可見的另一個畫布。如果要繪製放大的場景，可以通過將隱藏畫布上的源矩形（其屏幕上的源矩形（sy,sx,sw和sh參數drawImage）繪製到較小的圖形）進行繪製。這會給你縮放效果。但是，如果您完全重新繪製畫布上的每一幀，您也可以簡單地看一下畫布對象的scale method。

來源

2011-08-11 22:54:10

謝謝，你給了我一些好地方開始！ –

我會試着+1然後:) –

我試過了，但我認爲我的帳戶還沒有這個能力。 :( 你仍然對工作做得很滿意。：D –

我在canvas元素及其內容上使用transform：scale（）方法成功。但是，在需要使用iframe引入canvas元素並且iframe上發生transform：scale的情況下，它在safari上運行，但不在移動Safari中運行。下面

https://stackoverflow.com/questions/11265483/inconsistencies-when-transform-scale-on-iframe-containing-canvas

來源

2012-06-29 16:35:58 PrimeLens

調整大小和縮放HTML5畫布和內容

回答

相關問題