調整大小的畫布內容

也許我錯過了一些基本的東西。調整大小的畫布內容

我用對象填充畫布。在用戶輸入中，我需要調整畫布的大小（從而縮放內容）。

JS（簡化）：

var c = document.getElementById('c'); 
var cc = c.getContext('2d'); 
cc.beginPath();   
cc.rect(20, 20, 20, 12); 
cc.fill(); 

function resizeCanvas(size){ 
    var c = document.getElementById('c'); 
    var cc = c.getContext('2d'); 
    // This will make the content disappear 
    c.width = c.style.width = c.height = c.style.height = size; 
}

HTML

<canvas id="c" width="200" height="200"></canvas> 
<br/> 
<button onclick='resizeCanvas(100);return false;'>Resize</button>

CSS

canvas {border: 1px solid black}

畫布的大小，但該內容被消隱。任何想法？

jsfddle here

來源

2014-05-09 Stefano Altieri

通過改變寬度或高度-and明顯改變磁盤後，您完全重新定義畫布，所以其實這是很合乎邏輯的畫布內容被清除：應該如何改變？
它應該縮放嗎？，重新使用現有的像素值，但是如何？以......爲中心，......？

這在某些時候甚至是一個'技巧'：要清除畫布，只需要canvas.width = 0，然後canvas.width = oldWidth，這將清除一切。由於clearRect或fillRect現在比這個技巧更快，所以沒有理由再使用它。

所以當你的畫布調整大小時，它會被清除。您需要在發生這種大小調整時決定您想要的策略：您是否會縮放舊的畫布並將其複製到新的畫布上，或者以相同的比例進行復制，或者將其作爲上/最左側的複製？
你決定。

如果你有一個'場景圖'，意思是說：如果你能夠重繪畫布上的每個對象，那就沒有真正的問題。
如果你不這樣做，你必須做一些努力才能在新畫布上獲取舊內容。
類似（未測試）：

function resizeCanvas(size){ 
    var c = document.getElementById('c'); 
    var canvasCopy = document.createElement('canvas'); 
    canvasCopy.width = c.width; canvasCopy.height = c.height; 
    canvasCopy.getContext('2d').drawImage(c, 0,0); // copy the 'old' canvas 
    // This will make the content disappear 
    c.width = c.style.width = c.height = c.style.height = size; 
    var cc = c.getContext('2d'); 
    cc.drawImage(canvasCopy, 0, 0) ; // or you might scale, or center, or... 
}

來源

2014-05-09 17:18:35 GameAlchemist

調整大小的畫布內容

回答

相關問題