Question

我无法使用clearRect方法完全清除矩形，该方法正在X方向上在画布上进行翻译。问题可以在JS Bin - Link to demo

现场看到

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);
    }
  }

}());

在向前/向后移动之前留下痕迹。我使用相同的尺寸来清除用于绘制它的矩形。

请遵守观察问题的完整途径。

Answer 1

IE10和FF21工作正常，Chrome给出了“残余”。

即便如此，我也无法始终如一地重现行为不端的行为。

另请注意，当您滚动jsbin结果面板时，残余物会消失。因此，Chrome会意识到这些剩余像素不应该存在。

看起来Chrome中的另一个画布错误（可能但不一定与抗锯齿相关）。

你可以通过扩展你的清晰区域来删除残余物来破解它。或者，您可以省略翻译并按间隔递增x以移动矩形。

Hacky修复：

context.clearRect(x+((interval>0)?-.5:.5), y, w, h);

在画布中翻译矩形

1 个答案: