將HTML5畫布調整爲父項

我想調整畫布元素的大小，以便適合其父項，例如是<body>（「全屏」）或某些<div>。這是我的嘗試：將HTML5畫布調整爲父項

// called at each frame 
function update() { 
    var canvasNode = document.getElementById('mycanvas'); 
    canvasNode.width = canvasNode.parentNode.clientWidth; 
    canvasNode.height = canvasNode.parentNode.clientHeight; 
}

由於某種原因，畫布不停止生長！也許client*不是正確的參數？

請參閱這裏行動代碼： http://jsfiddle.net/ARKVD/24/

來源

2011-12-24 Giovanni Funchal

如果畫布的高度爲155px，則主體高度爲160px，這使得畫布每次都保持增長5px（每次畫布增長時，主體看起來都是5px）。不過，我不知道爲什麼，因爲你確實在'0px'上設置了所有邊距/填充。（這是在Chrome上。） – pimvdb 2011-12-24 11:55:52

謝謝，在Linux/Firefox上，我看到4px或3px的偏移量（取決於我的窗口是否被最大化或沒有）...煩人！ – 2011-12-24 11:59:49

奇怪的是，如果畫布被設置爲'0px'的高度，則身體的高度爲20px。如果實際移除了畫布，則該主體只會摺疊爲「0px」。 – pimvdb 2011-12-24 12:08:30

最簡單的事情是要始終保持畫布在自己的股利。

唯一會在這個div中的是畫布。

然後，您可以使用CSS調整div的大小，但不管您想要什麼。你想要它像身體一樣大嗎？給予div width: 100%。

那麼你可以隨時理所當然做到：

canvas.width = theDiv.clientWidth; 
canvas.height = theDiv.clientHeight;

如果你這樣做，你就不必擔心，當人體是div的直接父你目前所面臨的問題，怪異。

來源

2011-12-24 19:01:30

你能解釋爲什麼它不能與身體一起工作（即爲什麼需要DIV）？ – 2011-12-24 19:18:09

如果您希望它與具有div的主體一樣大，可以更輕鬆，因爲您可以使用CSS指定寬度和高度（如100％寬度等）。 100％的寬度並不一定與身體的'clientWidth'一樣大。相反，它使它與CSS規範中調用的「contains block」一樣大，它與body的clientWidth和Height不同（小）。從這開始：http://jsfiddle.net/9FyNZ/ – 2011-12-24 19:36:46

謝謝！這解決了我遇到的一個非常煩人的問題。 – Brad 2014-06-29 23:58:22

我發現了同樣的問題，我唯一能找到的解決方法是將畫布高度設置爲parentHeight - 1.這是使用CEF。在this撥弄我不得不將其設置爲上級 - 5

canvasNode.height = div.clientHeight - 5;

來源

2014-09-29 10:04:45 Sam

您可以通過打破父節點和子節點之間的循環依賴解決該問題。 DOM元素的大小分配應該只傳播自上而下（從父項到子項）。您可以確保子元素（畫布）不設置

canvasNode.style.position = 'absolute';

這使得它變成了自己的文檔流獨立於父母的影響父母的大小。

來源

2017-07-25 21:19:05 Imran

我發現，最乾淨的方法是簡單地「提醒」 canvas元素它有多大應該是在調整大小：

window.onresize = function() { 
    canvas.style.width = '100%'; 
    canvas.height = canvas.width * .75; 
}

高度在這種情況下設置有簡單地維持4 ：3比例。如果你願意的話，你當然可以做到100％。

來源

2017-11-09 23:24:07

將HTML5畫布調整爲父項

回答

相關問題