0

clearRectキャンバス上でX方向を横切って翻訳されているメソッドを使用して、長方形を完全にクリアすることはできません。問題はJS Binでライブで見ることができます- デモへのリンク

JS コード

(function() {  

  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');

  context.fillStyle = '#ccc';
  context.fillRect(0, 0, 100, 50); //x,y,w,h

  translate(canvas, context, 0, 0, 100, 50, 'x', 5);

  function translate(canvas, context, x, y, w, h, direction, interval) {
    context.fillRect(x, y, w, h);

    if (direction == 'x') {
      if ((x + interval + w >= canvas.width) || (x + interval < 0)) interval = -1 * interval;

      setTimeout(function() {
        context.clearRect(x, y, w, h);
        translate(canvas, context, x + interval, y, w, h, direction, interval);
      }, 1000);
    }
  }

}());

前進/後退する前に痕跡を残しています。そして、同じ寸法を使用して、描画に使用された長方形をクリアしました。

問題を観察するための完全なパスを観察してください。

4

1 に答える 1

1

IE10 と FF21 は正常に動作し、Chrome は「残骸」を表示します。

それでも、誤動作の影響を一貫して再現することはできません。

また、jsbin の結果パネルをスクロールすると、残りの部分が消えることに注意してください。そのため、Chrome はこれらの残りのピクセルが存在しないことを認識するようになります。

Chrome のさらに別のキャンバス バグのようです (アンチエイリアスに関連している可能性がありますが、必ずしもそうとは限りません)。

クリアエリアを拡張して残りを消去することで、ハッキングできます。または、翻訳を省略し、間隔で x をインクリメントして四角形を移動することもできます。

ハッキーな修正:

context.clearRect(x+((interval>0)?-.5:.5), y, w, h);
于 2013-05-22T14:34:28.150 に答える