Question

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

我无法理解为什么它似乎偶尔如此行动，特别是在调整浏览器大小或进行其他操作时（我认为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;

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

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

Answer 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;
        }
    }
};

三角洲timimg画布在试图画心跳时被践踏

1 个答案: