Question

我正试图在JS中制作正弦波动画，但它并没有像预期的那样发挥作用。我正在使用<canvas>元素和window.requestAnimationFrame()方法，但这是一个CPU占用，当我用滑块改变频率时它只是断开并显示随机波形。我也不知道绘制相邻线是否是表示正弦波的最佳方式。请注意，我将使用vanilla JS，正弦波的频率和幅度是由滑块设置的变量。提前谢谢。

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

更新：我参与其中，这是新版本：http://cssdeck.com/labs/sbfynjkr

Answer 1

看看这个例子是否可以帮到你一点

Sine Wave Example canvas

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

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

在js中制作正弦波动画

2 个答案: