如何在IE9中實現響應式畫布高度

我希望在div中包含畫布元素的響應式頁面。我應該能夠簡單地將一個畫布元素包裝在另一個塊元素中，併爲該畫布提供相對寬度。雖然這種方法適用於Chrome，Firefox，Safari和Opera，或IE當然是美中不足的！我還沒有嘗試舊版本的IE9然後 - 如預期在IE9這個簡單的代碼示例不起作用：如何在IE9中實現響應式畫布高度

<!DOCTYPE html> 
<html lang="en-US"> 

    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <title>Test IE9 Canvas Height</title> 
     <style> 
      body { 
       margin: 0; 
       padding: 0; 
      } 
      #container { 
       position: relative; 
       padding-top: 32%; 
       background-color: #88f; 
      } 
      .instruments { 
       position: absolute; 
       bottom: 0%; 
       width: 100%; 
       padding-bottom: 16%; 
       background-color: #8f8; 
      } 
      #circle { 
       position: absolute; 
       left: 42%; 
       width: 16%; 
      } 
     </style> 
    </head> 

    <body> 
     <div id="container"> 
      <div class="instruments"> 
       <canvas id="circle"></canvas> 
      </div> 
     </div> 
     <script> 
      var canvas = document.getElementById("circle"); 
      var ctx = canvas.getContext("2d"); 

      // Default canvas is 300x150, so make it square 
      canvas.height = canvas.width; 

      ctx.beginPath(); 
      ctx.arc(canvas.width/2, canvas.height/2, canvas.width/2, 0, 2 * Math.PI); 
      ctx.fillStyle = "red"; 
      ctx.fill(); 
     </script> 
    </body> 

</html>

這個簡單的頁面應該呈現高度的藍色塊體寬度的32％，然後綠色的另一個塊與底部1/2重疊。內部div內部是一個畫布元素，它沒有明確設置高度和寬度 - 因此它可以保持各種窗口/主體寬度的流暢性。畫布應繪製一個圓形的紅色圓圈，其高度完全包含在其包含的div內。除了IE9以外，其他瀏覽器都能很好地工作（除了我認爲的IE10外）。

即使我做指定畫布大小，

<canvas id="circle" width="300" height="300"></canvas>

它仍然無法正常工作。

有什麼我做錯了，還是有更好的方法來實現這個目標？我不想對像素或點的大小進行設計或編碼，而傾向於避免使用JavaScript IE攻擊。謝謝

來源

2013-08-26 Scotty

如果要調整畫布的大小而不是CSS，請在resize事件處理函數中使用canvas.width和canvas.height。如果您必須使用CSS調整大小，請使用相同的百分比調整寬度和高度。 – markE

我欣賞提示，但我不想調整大小的事件處理程序。很抱歉，我只是嘗試將css高度設置爲100％，並且它在這個簡單的示例中起作用。這樣做在我的真實網頁上不起作用，所以我現在必須找出差異。如果問題仍然存在，我會發布後續行動。 – Scotty

FWIW，我認爲IE11的行爲改變了，以匹配其他瀏覽器。 – EricLaw

老實說你的IE語氣不好的口氣再次讓我不想幫你所有這些。下次撥號。

你的行爲有點不確定，因爲canvas的本質是「伸展」他們的內容，並且代碼中沒有任何東西保持你的方形，所以沒有理由讓它平均地縮放......你可以看到這個自己通過給畫布背景顏色...短版是添加：

height: 100%

到canvas'css來使它工作，你希望它...希望這有助於-ck

方式

UPDATE：

我看了你的評論，你似乎不明白，設置canvas.width和canvas.height只改變元件的內部「繪圖面」的規模。當您設置元素的樣式（默認值爲auto）時，您正在設置顯示錶面的尺寸。您遇到的問題是，您希望瀏覽器在將其中一個樣式維度成員設置爲auto而另一個不是時（例如它如何與img標記一起使用）保留canvas的內部尺寸。 Chrome瀏覽器似乎表現得如此。但IE只是讓你的實際維度通過，所以在你的情況下，就好像你設置高度爲300px。我不確定是否有一個「規範正確」的方法，但似乎所有的實現都在收斂你的首選行爲。

總之，解決問題的方法是使用img標籤，因爲該標籤將正確的行爲，只是使用數據URI來得到你的畫布圖像到它：

<!DOCTYPE html> 
<html lang="en-US"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Test IE9 Canvas Height</title> 

<style> 
    body { 
     margin: 0; 
     padding: 0; 
    } 

    #container { 
     position: relative; 
     padding-top: 32%; 
     background-color: #88f; 
    } 

    .instruments { 
     position: absolute; 
     bottom: 0%; 
     width: 100%; 
     padding-bottom: 16%; 
     background-color: #8f8; 
    } 

    #circle { 
     position: absolute; 
     left: 42%; 
     width: 16%; 
    } 
</style> 

</head> 
<body> 

<div id="container"> 
    <div class="instruments"> 
     <img id="circle" src=""/> 
    </div> 
</div> 

<script> 
    var canvas = document.createElement("canvas"); 
    var ctx = canvas.getContext("2d"); 

    // Default canvas is 300x150, so make it square 
    canvas.height = canvas.width = 300; 

    ctx.beginPath(); 
    ctx.arc(canvas.width/2, canvas.height/2, canvas.width/2, 0, 2 * Math.PI); 
    ctx.fillStyle = "red"; 
    ctx.fill(); 

    var img = document.getElementById('circle'); 
    img.src = canvas.toDataURL(); 
</script> 

</body> 

</html>

這會給你的效果你正在尋找，而不需要任何進一步的攻擊...

在一個側面說明，您使用填充「尺寸」與百分比元素的css技術是有點脆弱（如所有％基於CSS技術）。如果我使用的是基於％CSS佈局，我可能會使用這樣的事：

<style> 
    html, body { 
     margin: 0; 
     padding: 0; 
     height:100%; 
    } 

    #container { 
     height: 33%; 
     background-color: #88f; 
    } 

    .instruments { 
     height:50%; 
     background-color: #8f8; 
     position:relative; 
     top:50%; 
    } 

    #circle { 
     display:block; 
     margin:auto; 
     width:auto; 
     height:100%; 
    } 
</style>

你可以看到在行動，充分的事（修改CSS）位置：http://jsbin.com/ajoTUZA/2/quiet

我希望這有助於-ck

來源

2013-08-26 20:37:58 ckozl

好吧，也許是公平的，也許不是。事實是，IE過去如此糟糕，並造成了如此多的痛苦，在這種情況下，每一個其他瀏覽器都能按預期工作。另外，在我的代碼中，我確實設置了canvas.height = canvas.width。我發現，在IE9中，即使任何絕對定位的包含塊都必須明確地設置高度 - 所以如果畫布包裝在div中，該div必須將高度設置爲100％。因此，您是正確的，但如果畫布出現在另一個塊中，它也必須將高度設置爲100％。所以是的，有語氣，但並非沒有道理。 – Scotty

@ user2170218設置「canvas」的尺寸與在css中設置尺寸不同。 'canvas'仍然有一個普通的'canvas.style.width'和'canvas.style.height'，我總是設置'canvas.style.width = canvas.width +'px';'和高度相同給他們數值），我從來沒有任何問題的任何實施。我們都知道IE過去一直很痛苦，但這種言辭只會讓你聽起來像是一個什麼樣的粉絲或什麼的...... – ckozl

如何在IE9中實現響應式畫布高度

回答

相關問題