HTML5畫布沒有更新：瀏覽器bug或我做錯了什麼？

我有一些HTML 5代碼，它以兩個黑色畫布開始，然後通過爲每一行繪製一條紅線，一次更新畫布一行。它應該看起來像一個落在黑色背景上的紅色窗簾。HTML5畫布沒有更新：瀏覽器bug或我做錯了什麼？

奇怪的是，起初它看起來像隨機行（比如說5％）被跳過並留下黑色。我以爲我有一個錯誤。但後來我注意到，如果我調整了瀏覽器窗口的大小，黑色線條全部變成紅色。那麼我認爲這是某種瀏覽器重繪錯誤。然後我注意到Chrome和Safari都有這種行爲。

那麼你認爲這兩個瀏覽器有相同的錯誤還是我做錯了什麼？

有趣的是，如果兩個畫布都使用style =「width：100％; height：100％」，則此問題消失。

<html> 
<table> 
    <tr> 
     <td><canvas id="myCanvas1" style="width:100%; height:100%"></canvas></td> 
     <td><canvas id="myCanvas2" style="width:200px; height:400px"></canvas></td> 
    </tr> 
</table> 
<script type="text/javascript"> 
    var canvases = [document.getElementById("myCanvas1"), document.getElementById("myCanvas2")]; 

    for(var i = 0; i < canvases.length; i++) { 
     var canvas = canvases[i]; 
     var ctx = canvas.getContext("2d"); 
     ctx.fillStyle = "black"; 
     ctx.fillRect(0, 0, canvas.width, canvas.height); 
    } 

    function updateRow(rowNum) { 

     var done = true; 
     for(var i = 0; i < canvases.length; i++) { 
      var canvas = canvases[i]; 

      if(rowNum >= canvas.height) { 
       return; 
      } 
      done = false; 

      var ctx = canvas.getContext("2d"); 

      var imageDataForRow = ctx.getImageData(0, rowNum, canvas.width, 1); 

      for(var offset = 0; offset < imageDataForRow.data.length; offset += 4) { 
       imageDataForRow.data[offset] = 255; 
       imageDataForRow.data[offset + 1] = 0; 
       imageDataForRow.data[offset + 2] = 0; 
       imageDataForRow.data[offset + 3] = 255; 
      } 

      ctx.putImageData(imageDataForRow, 0, rowNum); 
     } 

     if(!done) { 
      var paintNextRow = function() { 
       updateRow(rowNum + 1); 
      } 
      setTimeout(paintNextRow, 1); 
     } 
    } 

    updateRow(0); 

</script>

來源

2012-04-16 Dejas

這發生在所有的browers？ – Ricardo 2012-04-16 16:09:12

Chrome，Safari =是。 Firefox =否IE =甚至不會呈現（可能與手邊的問題無關）。 – Dejas 2012-04-16 16:30:24

這是你的問題：

<canvas id="myCanvas1" style="width:100%; height:100%">

您正在使用CSS的寬度和高度，而不是<canvas> HTML屬性設置畫布的寬度和高度。您實際上正在擴展一個尺寸爲300x150的畫布（默認設置）以在整個屏幕上傾斜。

您需要定義無論是在canvas標籤寬度/高度：<canvas width="500" height="500">

或代碼：

var canvas = document.getElementById("canvas"); 
canvas.width = 500; 
canvas.height = 500;

，而不是由CSS。如果你這樣做：

<canvas style="width: 500px; height: 500px;">

然後，你將有一個300x150的畫布（默認大小），這是調整/扭曲是500×500，這是幾乎可以肯定，你在說什麼。

它看起來像你想動態地改變畫布寬度。這是好的，但你必須做一些事情。一種方法是使用窗口的onresize事件，並在每次發生此情況時（如果clientWidth已更改）將畫布寬度設置爲div的clientWidth。另一種方法是做一個簡單的普通計時器，每半秒鐘檢查一次，並設置canvas.width等於div.style.clientWidth。

（我寫上面的寫意所以有可能是一個錯字，但你的想法）

來源

2012-04-16 16:14:50

有趣。不知道100％會是一個延伸。更改爲width =「500」height =「500」可以解決問題。假設我想做一個伸展（而我沒有），我仍然認爲黑線可以被證明是一個錯誤。如何將紅線拉伸成黑線？ – Dejas 2012-04-16 16:29:33

其試圖在黑色背景上拉伸紅色線條的視覺工件，但不能保證傾斜的線條不會讓某些背景（黑色畫布）顯示出來。 – 2012-04-16 17:25:47

HTML5畫布沒有更新：瀏覽器bug或我做錯了什麼？

回答

相關問題