1

我有一个 javascript，它以这样的动画方式画一条线：

function drawLeftLine() {
  var yoffset = 500;
  var startX = 0;
  var startY = yoffset;
  var endX = canvas.width;
  var endY = yoffset;
  var amount = 0;
  setInterval(function() {
      amount += 0.03; // change to alter duration
      if (amount > 1) amount = 1;
      //c.clearRect(1, 1, canvas.width, canvas.height);
      context.lineWidth = 1;
      c.beginPath();
      c.strokeStyle = "black";
      c.moveTo(startX, startY);
      // lerp : a  + (b - a) * f
      c.lineTo(startX + (endX - startX) * amount, startY + (endY - startY) * amount);
      c.stroke();
      c.closePath();
  }, 30);
}

我想以动画方式擦除那条线（即，它应该看起来像是被擦除了）。我尝试通过使用相同的代码在其顶部绘制一条白线但将笔触颜色更改为白色来做到这一点。结果是一条“灰色”的线。即使我在它上面画了一条明显更宽的白线，它有时仍然可以显示出来。您需要全屏查看：

http://jsfiddle.net/3D9jt/5/embedded/result/

这是完整的代码： http: //fiddle.jshell.net/3D9jt/5/

什么是逐步擦除这条线的好方法？请记住，我的画布上还有其他东西。谢谢你的帮助！

4

0 回答 0