在JS中制作正弦波动画

Question

我正在尝试为JS中的正弦波制作动画，但效果不如预期。 我正在将<canvas>元素与window.requestAnimationFrame()方法一起使用，但这是CPU的负担，当我使用滑块更改频率时，它会断裂并显示随机波形。 我也不知道画相邻的线是否是代表正弦波的最佳方法。 请注意，我将使用香草JS，并且正弦的频率和幅度是由滑块设置的变量。 提前致谢。

这是到目前为止我得到的： 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

看看这个例子对你有没有帮助

正弦波示例画布

    function init()
    {
        setInterval(OnDraw, 200);
    }

    var time = 0;
    var color = "#ff0000";

    function OnDraw()
    {
        time = time + 0.2;
        var canvas = document.getElementById("mycanvas");
        var dataLine = canvas.getContext("2d");
        var value = document.getElementById("lineWidth");

        dataLine.clearRect(0, 0, canvas.width, canvas.height);

        dataLine.beginPath();

        for(cnt = -1; cnt <= canvas.width; cnt++)
        {
            dataLine.lineTo(cnt, canvas.height * 0.5 - (Math.random() * 2 + Math.cos(time + cnt * 0.05) * 20 ));
        }

        dataLine.lineWidth = value.value * 0.1;
        dataLine.strokeStyle = color;
        dataLine.stroke();
    }

Answer 2

我已经搞砸了很多正弦波，因为我正在做一个涉及动画正弦波的小项目。 我有一些您可能感兴趣的代码。 如前所述，您需要确保在循环中使用正确的增量，以使行看起来不锯齿。

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);

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