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