Canvas Delta Timig在试图绘制心跳图时被踩踏

我对画布和增量时间更新非常陌生，请原谅我的无知。我正在尝试重新创建一个心率监视器（JSFIDLE中显示的屏幕截图，理想的最终渲染匹配）

我不明白为什么它看起来如此零散，特别是在调整浏览器大小或执行其他操作时（我认为delta计时背后的想法是它消除了滞后）

我用dt来计算何时我需要移动到下一点

var distance = Math.sqrt(
    (nextPosition.x-lastPosition.x)*(nextPosition.x-lastPosition.x) +
    (nextPosition.y-lastPosition.y)*(nextPosition.y-lastPosition.y)
);

var duration = distance/this.speed;
var t = this.totalTime/duration;
var x = (1.0 - t)*lastPosition.x + t*nextPosition.x;
var y = (1.0 - t)*lastPosition.y + t*nextPosition.y;   

我确实有一个更平滑的版本，只使用了一个计数器和sin，但我被告知它不会那么平滑或灵活（我最终想淡出“尾巴”）

---

我将代码简化了一点。这是演示（代码混乱）

---

这是你想要的吗？另外，

requestAnimationFrame

（和

setTimeout

）将在其他进程优先时跳过帧。您可以使用静态时间，不跳过任何点，也可以绘制点而不是线，而不是基于时差来确定当前位置：非常好，谢谢！第二个演示似乎更稳定，但它确实似乎不时跳过点？您可以像这样更改总时间

this.totalTime+=1/60和它将永远不会错过一个点。而且，您可能不应该定义坐标的x部分。心脏监护仪基于时间（x轴）和幅度（y轴）。这是一个更精确的表示（尽管代码有点草率），谢谢。淡入淡出的背景（矩形）是否用于实现淡入淡出的尾部？只是它需要完全透明，因为它所处的背景图案。是的。您可以使用不同的方法来执行此操作。这是最简单的方法，但会留下一些痕迹。
Game.prototype.renderBeat = function()
{
    // Get our current/target positions
    var position = this.points[this.nextPoint];
    var lastPosition = this.points[this.currentPoint] || position;

    var x = 0;
    var y = position.y;

    this.context.beginPath();
    this.context.moveTo(x+1, lastPosition.y);
    this.context.lineTo(x, position.y);
    this.context.closePath();

    this.context.stroke();

    if (this.points[this.currentPoint]){        
         this.nextPoint = this.currentPoint;
    }

    // slowly fade out trail
    this.context.fillStyle = "rgba(0,0,0,.01)";
    this.context.fillRect(-this.translated, 0, this.canvas.width, this.canvas.height);

    // this allows us to only care about the amplitude of the wave. 
    this.context.translate(1,0);
    this.translated += 1;

    this.currentPoint++;

    // if we've reached the last point in our array, loop around
    if(this.currentPoint > this.points.length)
    {   
        // random death (this randomly unsets any point except the first, slowing eliminating the "pulse"
        this.points[Math.floor(Math.random()*(this.points.length-2)+1)] = undefined;

        this.currentPoint = 0;
        this.nextPoint = 0;

        if (this.translated > this.canvas.width){
            this.context.translate(-this.translated, 0);
            this.translated = 0;
        }
    }
};