將html文檔中的所有<canvas>都設置爲文檔的寬度和高度？

Question

如果不使用jquery（即只使用舊的javascript），我如何將html文檔中的所有畫布設置爲文檔的寬度和高度？

Answer 1

我創建了一個的jsfiddle這裏：http://jsfiddle.net/ZrfeV/

您需要給該文檔的高度，以便在畫布上知道有多大擴大到，否則會擴大到什麼高度由內部高度文檔收益的子元素。

var canvases = document.getElementsByTagName('canvas'); 

for (var i = 0; i < canvases.length; i++) { 

    canvases[i].style.width = '100%'; 
    canvases[i].style.height = '100%'; 
    canvases[i].width = canvases[i].clientWidth; 
    canvases[i].height = canvases[i].clientHeight; 

} 

Answer 2

注意：兩個酋長和Naelio的答案是技術上不正確。

---

Naelio： 更改畫布的風格將改變畫布的客戶區寬度和CLIENT HEIGHT不是實際的寬度和高度，以便在畫布上的內容最終會被縮放/拉伸。這裏這個問題的
例子：http://jsfiddle.net/AnLCw/1/（注意黑色50×50平方是如何使用樣式的方式拉伸）

---

Chief17： 不能指定百分比畫布的寬度和高度。這裏的問題的例子：http://jsfiddle.net/Sg7cb/2/（注意，沒有畫布時顯示寬度和高度百分比）

---

因此，這裏是實際的解決方案：

您需要設置畫布的風格是：寬度：100％和高度：100％

canvas.style.width = "100%" 
canvas.style.height = "100%" 

，然後執行：

canvas.width = canvas.clientWidth 
canvas.height = canvas.clientHeight 

工作示例這裏：http://jsfiddle.net/acYdc/1/（注意黑方如何正確繪製和畫布填充區域。）

另一種解決方案是剛剛設置

canvas.width = window.innerWidth; 
canvas.height = window.innerHeight; 

但canvas.width = canvas.clientWidth方法更加靈活。