0

我对画布和增量时间更新非常陌生，所以请原谅我的无知。我正在尝试重新创建心率监视器（jsfiddle 中显示的屏幕截图，理想的最终渲染匹配https://www.youtube.com/watch?v=ew6Jp74vaN4）

我无法弄清楚为什么它似乎如此零星地行动，尤其是在调整浏览器大小或执行其他操作时（我认为增量计时背后的想法是它消除了延迟）

http://jsfiddle.net/alexcroox/CjCkV/

我正在使用 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 的更平滑的版本，但有人告诉我它不会那么平滑或灵活（我最终想淡出“尾巴”）

http://jsfiddle.net/alexcroox/AZ9zC/

4

1 回答 1

1

我在下面简化了代码。这是演示（代码混乱）http://jsfiddle.net/CjCkV/19/

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;
        }
    }
};
于 2012-12-20T22:32:38.560 回答