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 回答