Question

我有这个代码在屏幕上绘制一个正弦波，但由于某种原因，画布上没有任何东西出现。很可能它与requestAnimFrame完全无关，但我相信这是问题所在。绘图函数中的var y应该只是Asin的简单正弦波函数（kx - omega * t），其中k是波数= 2pi /波长。

使用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();

编辑：不确定为什么Amp1和Wav1会出现青色？

Answer 1

首先，你正在为animate产生无数次调用，因为你在每个动画帧中调用它，并且每50毫秒，所以删除间隔或调用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>

requestAnimationFrame没有在画布上绘制任何东西

1 个答案: