javascript - 在js中动画正弦波

Question

我正在尝试在 JS 中为正弦波设置动画，但它没有按预期运行。我正在使用 <canvas>元素以及 window.requestAnimationFrame()方法，但它是一个 CPU pig ，当我用 slider 改变频率时，它会中断并显示随机波形。我也不知道画相邻的线是否是表示正弦波的最佳方式。请注意，我将使用 vanilla JS，并且正弦的频率和幅度是由 slider 设置的变量。提前致谢。

这是我目前得到的:http://cssdeck.com/labs/8cq5vclp

更新:我在努力，这是新版本:http://cssdeck.com/labs/sbfynjkr

var canvas = document.querySelector("canvas"),
  ctx = canvas.getContext("2d"),
  cHeight = canvas.height,
  cWidth = canvas.width,
  frequency = document.querySelector("#f").value,
  amplitude = 80,
  x = 0,
  y = cHeight / 2,
  point_y = 0;

window.onload = init;

function init() {
  document.querySelector("#f").addEventListener("input", function() {
    frequency = this.value;
    document.querySelector("#output_f").value = frequency;
  }, false);

  drawSine();
}

function drawSine() {
  ctx.clearRect(0, 0, cWidth, cHeight);

  ctx.beginPath();
  ctx.moveTo(0, y);
  ctx.strokeStyle = "red";
  ctx.lineTo(cWidth, y);
  ctx.stroke();
  ctx.closePath();

  ctx.beginPath();
  ctx.strokeStyle = "black";
  for (x = 0; x < 600; x++) {
    point_y = amplitude * -Math.sin((frequency / 95.33) * x) + y;
    ctx.lineTo(x, point_y);
  }
  ctx.stroke();
  ctx.closePath();
  requestAnimationFrame(drawSine);
}

canvas {
  border: 1px solid red;
  margin: 10px;
}

<input id="f" type="range" min="0" max="20000" value="20" step="1">
<output for="f" id="output_f">20</output>
<canvas width="600px" height="200px"></canvas>

Answer 1

我经常处理正弦波，因为我正在做一个涉及动画正弦波的小项目。我有一些您可能有兴趣查看的代码。如前所述，您需要确保在循环中使用正确的增量，以使线条看起来不会参差不齐。

https://jsfiddle.net/uawLvymc/

window.requestAnimationFrame = window.requestAnimationFrame ||
  window.mozRequestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  window.msRequestAnimationFrame ||
function(f) {
  return setTimeout(f, 1000 / 60)
};

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var startTime = new Date().getTime();

function getPath(height) {
  var width = canvas.width;
  var spacing = 0.08;
  var loopNum = 0;
  var pointList = [];
  var i = 0;

  for (i = 0; i < width / 2; i++) {
    pointList[loopNum] = [loopNum, Math.sin(loopNum * spacing) * (i * height) + 100];
    loopNum++;
  }
  for (i = width / 2; i > 0; i--) {
     pointList[loopNum] = [loopNum, Math.sin(loopNum * spacing) * (i * height) + 100];
     loopNum++;
  }
  return pointList;
}

function draw() {
  var currentTime = new Date().getTime();
  var runTime = currentTime - startTime;

  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.lineWidth = 2;
  ctx.strokeStyle = "rgb(80, 100, 230)";

  var height = Math.sin(runTime * 0.008) * 0.2;
  var pointList = getPath(height);

  for (var i = 0; i < 500; i++) {
    if (i === 0) {
      ctx.moveTo(pointList[0][0], pointList[0][1]);
    } else {
      ctx.lineTo(pointList[i][0], pointList[i][1]);
    }
  }
  ctx.stroke();

  window.requestAnimationFrame(draw);
}

window.requestAnimationFrame(draw);

抱歉，我并没有真正编辑代码，它只是我正在处理的内容的直接副本。希望它有所帮助。