requestAnimationFrameはキャンバス上に何も描画しません

Question

私はこのコードを画面上に描きますが、何らかの理由でキャンバスに何も表示されません。 requestAnimFrameと全く関係がない可能性は非常に高いですが、これが問題だと私は信じています。 描画関数のvar yは、Asin（kx - omega * t）の単純な正弦波関数でなければなりません。ここで、kは2π/波長の波数です。

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：Amp1とWav1はシアンを予定されている理由は本当にわかりませんか？

Answer 1

最初にすべてのアニメーションフレームをanimateに呼び出すので、アニメーションフレームを50 msごとに呼び出すので、インターバルまたはrequestAnimFrameの呼び出しを削除してください。

次に、残りのコードが正しく実行されます。なぜ+ 999をyに入れるのか分かりませんが、何も見えず、単に画面外に出るだけです（canvas）。私は数学者ではないので、私はあなたの洞調律を破ったかもしれませんが、実際にそれが実際に働いていることを示したかっただけです。

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>