HTML5キャンバスが更新されていません：ブラウザのバグですか？何か間違っていますか？

私は2つの黒いキャンバスから始まり、行ごとに赤い線を描くことで一度に1つの行を更新するHTML 5コードをいくつか持っています。黒い背景の上に落ちる赤いカーテンのように見えます。HTML5キャンバスが更新されていません：ブラウザのバグですか？何か間違っていますか？

奇妙な部分は、最初はランダムな行（たとえば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

これは、すべてのたブラウザで起こるの？ – Ricardo

Chrome、Safari =はい。 Firefox =いいえIE =はレンダリングさえしません（おそらく手元の問題とは無関係かもしれません）。 – Dejas

これはあなたの問題です：

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

あなたはCSSの幅と高さではなく<canvas> HTML属性を使用してキャンバスの幅と高さを設定しています。文字通り300x150（デフォルト）のキャンバスを伸ばして、画面全体にスキューさせます。

次のいずれかのキャンバスタグの幅/高さを定義する必要があります：<canvas width="500" height="500">

またはコードで：CSSによる

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

とされていません。あなたはこれをしなかった場合：

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

は、その後、あなたは/スケールほぼ確実にあなたが取得しているものである500×500であることが反った300x150のキャンバス（デフォルトサイズ）を持っています。

キャンバスの幅を動的に変更したいようです。これは問題ありませんが、いくつかのうちの1つを実行する必要があります。 1つは、ウィンドウのonresizeイベントを使用し、キャンバスの幅をdivのclientWidthに等しく設定します（clientWidthがもちろん変更されている場合）。もう1つは、0.5秒おきに同じことを確認するための単純な汎用タイマーを実行し、canvas.widthをdiv.style.clientWidthと等しく設定することです。

は（タイプミスがあるかもしれないので、私は上記のフリーハンドを書いて、あなたのアイデアを得る）

出典

2012-04-16 16:14:50

興味深い。 100％がストレッチであることを知らなかった。 width = "500" height = "500"に変更すると、問題が修正されます。私はストレッチをしたいと思っていた（と私はしない）と私はまだ黒い線がバグとして正当化できると思う。赤い線を黒い線に伸ばすにはどうすればいいですか？ – Dejas

黒い背景の上に赤い線を引き伸ばそうとする視覚的なアーティファクトは、歪んだ線が背景の一部（黒いキャンバス）を見せないことを保証するものではありません。 –

HTML5キャンバスが更新されていません：ブラウザのバグですか？何か間違っていますか？

答えて

関連する問題