我正在嘗試創建一個占用視口寬度和高度100％的畫布元素。你可以在我的例子看到這里正在發生，但它是在Chrome和FireFox中添加滾動條。如何防止額外的滾動條，只提供窗口的寬度和高度作為畫布的大小？
3 回答
慕工程0101907
TA貢獻1887條經驗 獲得超5個贊
我將回答更一般的問題，即如何在窗口調整大小時使畫布動態調整大小。接受的答案適當地處理寬度和高度都應該是100％的情況，這是所要求的，但也會改變畫布的縱橫比。許多用戶希望畫布在窗口調整大小時調整大小，但同時保持寬高比不變。這不是確切的問題，但它“適合”，只是將問題放入稍微更一般的背景中。
窗口將具有一些寬高比（寬度/高度），畫布對象也是如此。你希望這兩個長寬比如何相互關聯是你必須要清楚的一件事，這個問題沒有“一刀切”的答案 - 我會經歷一些你可能會遇到的常見情況想。
最重要的是你必須清楚：html canvas對象有一個width屬性和一個height屬性; 然后，同一個對象的css也有一個width和height屬性。這兩個寬度和高度是不同的，兩者都適用于不同的東西。
更改寬度和高度屬性是一種方法，您可以隨時更改畫布的大小，但是您必須重新繪制所有內容，這需要花費時間并且并非總是必要，因為您可以完成一些大小更改通過css屬性，在這種情況下，您不重繪畫布。
我看到4個你可能想要在窗口調整大小時發生的事情（全部以全屏畫布開始）
1：您希望寬度保持100％，并且您希望寬高比保持不變。在這種情況下，您不需要重繪畫布; 你甚至不需要一個窗口大小調整處理程序。所有你需要的是
$(ctx.canvas).css("width", "100%");其中ctx是您的畫布上下文。小提琴：resizeByWidth
2：您希望寬度和高度都保持100％，并且您希望得到的寬高比變化具有拉伸圖像的效果?，F在，您仍然不需要重繪畫布，但需要一個窗口調整大小處理程序。在處理程序中，你這樣做
$(ctx.canvas).css("height", window.innerHeight);3：您希望寬度和高度都保持100％，但寬高比變化的答案與拉伸圖像不同。然后你需要重繪，并按照接受的答案中概述的方式進行重繪。
小提琴：重繪
4：您希望頁面加載時寬度和高度為100％，但此后保持不變（對窗口調整大小沒有反應。
小提琴：固定
除了設置模式的第63行外，所有小提琴都有相同的代碼。您還可以復制小提琴代碼以在本地計算機上運行，在這種情況下，您可以通過查詢字符串參數選擇模式，如？mode = redraw
- 3 回答
- 0 關注
- 2213 瀏覽
添加回答
舉報
0/150
提交
取消