requestAnimationFrame keine Zeichnung auf Leinwand

Question

Ich habe diesen Code, um eine Sinuswelle auf dem Bildschirm zu zeichnen, aber aus irgendeinem Grund kommt nichts auf der Leinwand. Es ist durchaus möglich, dass es überhaupt nichts mit requestAnimFrame zu tun hat, aber ich glaube, dass dies das Problem ist. Die var y in der Zeichenfunktion sollte nur eine einfache Sinusfunktion von Asin sein (kx - omega * t), wobei k die Wellenzahl ist, die = 2pi/Wellenlänge.

Javascript:

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 
var cx = 0, 
    t = 0, 
    Amp1 = 200, 
    Wav1 = 100, 
    omega = 0.01; 
function draw(x, t) { 
    var y = Amp1 * Math.sin(x(2 * Math.PI/Wav1) - omega * t) + 999; 
    ctx.beginPath(); 
    ctx.moveTo(t + 100, y); 
    ctx.lineTo(t + 100, y + 1); 
    ctx.stroke(); 
    ctx.closePath(); 
} 
window.requestAnimFrame = (function (callback) { 
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { 
     window.setTimeout(callback, 100); 
    }; 
}()); 
function animate() { 
    setInterval(function() { 
     window.requestAnimFrame(animate); 
     var newX = cx, 
      newT = t; 
     cx += 0.5; 
     t += 0.5; 
     draw(newX, newT); 
    }, 50); 
} 
animate(); 

EDIT: Nicht wirklich sicher, warum Amp1 und Wav1 anstehen Cyan?

Answer 1

Als Erstes erzeugen Sie unzählige Anrufe an animate, weil Sie es jeden Animationsrahmen nennen, und alle 50 ms, so entfernen Sie entweder das Intervall oder den Anruf an requestAnimFrame.

Dann läuft der Rest Ihres Codes richtig. Ich bin mir nicht sicher, warum Sie + 999 auf y setzen, aber deshalb sehen Sie nichts, es geht einfach aus dem Bildschirm (canvas). Da ich kein Mathematiker bin, habe ich vielleicht Ihre Sinuskurve gebrochen, aber ich wollte Ihnen nur zeigen, dass es tatsächlich funktioniert.

var canvas = document.getElementById("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 
var cx = 0, 
 
    t = 0, 
 
    Amp1 = 200, 
 
    Wav1 = 100, 
 
    omega = 0.01; 
 

 
function draw(x, t) { 
 
    var y = Amp1 * Math.sin(x*(2 * Math.PI/Wav1) - omega * t); 
 
    ctx.beginPath(); 
 
    ctx.moveTo(t + 100, y); 
 
    ctx.lineTo(t + 100, y + 1); 
 
    ctx.stroke(); 
 
    ctx.closePath(); 
 
} 
 
window.requestAnimFrame = (function(callback) { 
 
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { 
 
    window.setTimeout(callback, 100); 
 
    }; 
 
}()); 
 

 
function animate() { 
 
    window.requestAnimFrame(animate); 
 
    var newX = cx, 
 
     newT = t; 
 
    cx += 0.5; 
 
    t += 0.5; 
 
    draw(newX, newT); 
 
} 
 
animate();

<canvas id="canvas"></canvas>