在clearRect（）之后用lineTo绘制画布，显示出斑点线

Question

我试图模拟一个医疗波形，它在屏幕上绘制一些线条，然后当它到达终点时，它会在绘制的新线条前面擦拭屏幕（一个50像素宽的区域）。我实际上有两个问题。

1. 在第一行完成后，我开始在画布上使用clearRect（）清除50像素宽的区域，并在屏幕上一次移动一个像素。看起来很棒，但即使坐标在调试器中看起来正确，矩形也会以两倍的速度穿过屏幕。

2. 更重要的是，在我的clearRect（）有斑点后绘制的线条。它的代码完全相同。

我使用一个画布用于背面的网格线，另一个用于为wavelines设置动画。

我的animate（）方法的第一件事是：

waveContext.beginPath();
waveContext.clearRect(CurrentXPosition, 0, CurrentXPosition + 50, CanvasHeight);
waveContext.stroke();

然后要绘制我的waveLines，我使用requestAnimFrame（）一次移动一个像素，我在这里执行此操作：

waveContext.lineWidth = 2.5;
waveContext.strokeStyle = waveColor;
waveContext.beginPath();
waveContext.moveTo(oldx, oldy);
waveContext.lineTo(newx, newy);
waveContext.stroke();

关于它。在调用clearRect（）之后，为什么这些行会是这样的？它适用于IE，Chrome和Firefox。

谢谢！