畫布最大化錯誤？

在我看來，我必須在一個小時內遇難，好像在Firefox，Safari和Chrome中發生的奇怪行爲。這裏是一些代碼：畫布最大化錯誤？

<!doctype html> 
<html> 
    <head> 
     <title>Watch me grow scrollbars!</title> 
    </head> 
    <body onload="resizeCanvas()"> 
     <canvas id="canvas"></canvas> 
    </body> 
</html> 

<script type="application/javascript"> 
    function resizeCanvas() { 
     var canvas = document.getElementById("canvas"); 
     canvas.setAttribute("height", window.innerHeight); 
     canvas.setAttribute("width", window.innerWidth); 
    } 
</script>

基本上，畫布總是似乎最大化'太多'，並且窗口增長兩側的滾動條。我嘗試過使用各種方法獲取文檔尺寸，包括嵌套在100％寬的絕對定位的div中的canvas，以及提取document.documentElement.clientWidth/Height屬性。

爲了確保我不會瘋狂，我放置了一個圖像代替畫布，瞧，相同的代碼完美地將圖像拉伸到文檔尺寸。

我在這裏做錯了什麼？我太累，無法理解。必須......喝點東西。

來源

2010-05-04 dmkc

您可能還需要爲'body'和'canvas'元素設置'margin：0;填充：0;邊框寬度：0;'。但說實話，我在Firefox中的快速測試仍然顯示滾動條。 – Zecc 2011-05-28 18:26:38

爲畫布設置'display：block'就是我想的。 – urraka 2012-12-24 22:48:11

我還沒找到問題的解決方法（仍然可以反饋），所以現在我有父容器元素的隱藏溢出，這大致帶來了我在找的東西。不過，如果這是不一致的，它不會好。除非我失去了一些東西..

來源

2010-05-04 05:16:52 dmkc

如果您正在尋找一種方法來擴展畫布以覆蓋整個頁面，我發現的最佳解決方案是讓CSS自動調整到100％，然後使用當前畫布元素大小來重置畫布分辨率。
爲了避免滾動條，您還必須將畫布CSS位置設置爲絕對值。

<!DOCTYPE html> 
<html> 
    <body onload="resizeCanvas()" style="margin: 0;"> 
     <canvas id="canvas" style="position: absolute; width: 100%; height: 100%;"></canvas> 
    </body> 
</html> 

<script type="application/javascript"> 
    function resizeCanvas() { 
     var canvas = document.getElementById("canvas"); 
     canvas.setAttribute("width", canvas.offsetWidth); 
     canvas.setAttribute("height", canvas.offsetHeight); 

     // We draw a circle, just to test that it works 
     var ctx = canvas.getContext("2d"); 
     ctx.beginPath(); 
     ctx.arc(canvas.offsetWidth/2, canvas.offsetHeight/2, canvas.offsetHeight/2, 0, Math.PI*2, true); 
     ctx.closePath(); 
     ctx.fill(); 
    } 
</script>

來源

2011-05-28 15:35:06 h3r3

-1

井（在Chrome 34，火狐27瀏覽器11測試），這在Firefox 4，但我還沒有在其他瀏覽器嘗試過，因爲我沒有他們在這臺電腦中。

<!doctype html> 
<html> 
    <head> 
     <title>Watch me grow scrollbars!</title> 
<style> 
body { margin: 0; padding: 0; } 
canvas { width: 100%; height: 100%; border: 0; } 
</style> 
<script type="text/javascript"> 
    function resizeCanvas() { 
     var canvas = document.getElementById("canvas"), 
      ctx = canvas.getContext('2d'), 
      height = document.body.clientHeight, 
      width = document.body.clientWidth; 
     canvas.setAttribute("height", height); 
     canvas.setAttribute("width", width); 
     ctx.fillStyle = 'rgb(128,128,128)'; 
     ctx.fillRect(10, 10, width-20, height-20); 
    } 
</script> 
    </head> 
    <body onload="resizeCanvas()"> 
     <canvas id="canvas"></canvas> 
    </body> 
</html>

至於IE7（不支持帆布反正），我只好到腳本的類型屬性改變從application/javascript到text/javascript，使代碼工作。

這就是爲什麼：（上What is the javascript MIME type for the type attribute of a script tag?報價keparo）

的MIME類型JavaScript不是標準化多年。現在正式爲：「application/javascript」。

這裏真正踢球的是，大多數瀏覽器將不使用屬性無論如何，至少不是在 script標籤的情況。他們實際上在包內查看並確定自己的類型。

因此，底線是，類型=「文/ JavaScript的」沒有做任何事情只要JavaScript是有關，但它的規範的一部分爲HTML 4和XHTML 1.0。

我不知道這是否仍代表更新版本的IE瀏覽器。

來源

2011-05-28 18:55:30 Zecc

畫布最大化錯誤？

回答

相關問題