画布clearRect()后,用了lineTo绘图示出了呈点状线(Canvas drawing wi

2019-10-20 07:04发布

我试图模仿它绘制在屏幕上的某些行,然后当它到达了终点,它划入新线前面的屏幕正在绘制(一50pixel广域)医疗波形。 其实我有两个问题。

  1. 第一线使其结束后,我开始在我的画布使用clearRect()来清除50像素的广域并移动矩形一个像素在屏幕上的时间。 看起来不错,但即使坐标在调试器看的权利,矩形是在屏幕上快两倍,因为它应该去。

  2. 更重要的是,该行beind画后,我的clearRect()是斑点。 其完全相同的代码。

我用一个帆布在后面的网格线和另一个动画wavelines。

在我的动画()方法的第一件事是:

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。

谢谢!

文章来源: Canvas drawing with lineTo after clearRect() shows spotty lines