javascript - 动画正弦波，固定起点和终点-6ren

javascript - 动画正弦波，固定起点和终点

转载作者：数据小太阳更新时间：2023-10-29 04:11:07

25

4

我的 Canvas 中有一个正弦波，它是动画的，左右摇摆。我想要实现的是起点和终点保持固定。如何实现？

这里是 Code Pen

function start() {
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");
  context.clearRect(0, 0, canvas.width, canvas.height);
  drawCurves(context, step);

  step += 5;
  window.requestAnimationFrame(start);
}

var step = -4;

function drawCurves(ctx, step) {
  var width = ctx.canvas.width;
  var height = ctx.canvas.height;
  ctx.beginPath();
  ctx.lineWidth = 2;
  ctx.strokeStyle = "rgb(66,44,255)";

  var x = 4;
  var y = 0;
  var amplitude = 20;
  var frequency = 90;
  while (y < height) {
    x = width / 2 + amplitude * Math.sin((y + step) / frequency);
    ctx.lineTo(x, y);
    y++;
  }
  ctx.stroke();
}

canvas {
  background-color: wheat;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body onload="start()">

  <canvas id="canvas" width="500" height="2000"></canvas>

</body>

</html>

最佳答案

我更改了 Canvas 的大小，因为我希望能够看到它。你可以把它改回你需要的。

我做了两件事:

频率必须是 var frequency = height/(2 * Math.PI); 或 var frequency = height/(4 * Math.PI);。分频器必须是 2 * Math.PI 的倍数
我将上下文向相反方向平移相同的量:ctx.translate(-amplitude * Math.sin(step/frequency), 0);

如果您需要更细微的振荡，请使用振幅。

在我的代码中有一个注释掉 ctx.closePath() 请取消注释此行以清楚地看到正弦波固定在中心。我希望这就是你要问的。

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");


function start() {

  context.clearRect(0, 0, canvas.width, canvas.height);
  drawCurves(context, step);

  step += 5;
  window.requestAnimationFrame(start);
}

var step = -4;

function drawCurves(ctx, step) {
  var width = ctx.canvas.width;
  var height = ctx.canvas.height;
  ctx.beginPath();
  ctx.lineWidth = 2;
  ctx.strokeStyle = "rgb(66,44,255)";

  var x = 0;
  var y = 0;
  var amplitude = 10;
  var frequency = height / (2 * Math.PI);
  ctx.save();
  ctx.translate(-amplitude * Math.sin(step / frequency), 0);
  while (y < height) {
    x = width / 2 + amplitude * Math.sin((y + step) / frequency);
    ctx.lineTo(x, y);
    y++;
  }
  //ctx.closePath();
  ctx.stroke();
  ctx.restore();
}

start();

canvas {
  background-color: wheat;
}

div {
  width: 100px;
  height: 400px;
  border: solid;
}

<div class="box">
<canvas id="canvas" width="100" height="400"></canvas>
</div>

更新

如果你需要使用多条曲线，你可以这样做:

我将绘制波形的所有功能都放在一个函数 drawWave 中，该函数将幅度和三 Angular 函数(正弦或余弦)用作参数:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var width = ctx.canvas.width;
var height = ctx.canvas.height;
var step = -4;

function start() {
  window.requestAnimationFrame(start);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  drawWave(10,"sin");
  drawWave(10,"cos");
  drawWave(5,"sin");
  
  step += 5; 
}


  
function drawWave(amplitude,trig){
  // trig is the trigonometric function to be used: sin or cos
  ctx.beginPath();
  ctx.lineWidth = 2;
  ctx.strokeStyle = "rgb(66,44,255)";

  var x = 0;
  var y = 0;
  //var amplitude = 10;
  var frequency = height / (2 * Math.PI);
  ctx.save();
  ctx.translate(-amplitude * Math[trig](step / frequency), 0);
  while (y < height) {
    x = width / 2 + amplitude * Math[trig]((y + step) / frequency);
    ctx.lineTo(x, y);
    y++;
  }

  ctx.stroke();
  ctx.restore();
}

start();

canvas {
  background-color: wheat;
}

div {
  width: 100px;
  height: 400px;
  border: solid;
}

<div class="box">
<canvas id="canvas" width="100" height="400"></canvas>
</div>

关于javascript - 动画正弦波，固定起点和终点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56082963/

25

4

0

文章推荐： c# - WPF 用户控件中的数据绑定(bind)

文章推荐： javascript控制台-infinity，这是什么意思？

文章推荐： c# - 为什么我不能索引到 ExpandoObject？

文章推荐： javascript - Google Cloud Functions 和 AWS Lambda 的超时问题

Javascript 正弦/余弦泰勒展开
我写的函数有问题。想法是使用 taylor 展开而不是 js 数学对象来计算 sin 和 cosin 值(在 radians 上运行) .这些是方程式: sin(x) = (x^1)/1! - (x^
python - FFT显示频谱中的(正弦)正弦波
我不知道这是编程还是数学问题，但我整理了一些FFT的简短示例。我加载了440hz的波并在顶部添加了一些正弦波，但是由于某种原因，频谱中存在一个我不理解的“波”。据我了解，频谱应该具有相同的| Y(f
c++ - 正弦、余弦、弧度和旋转
这个问题在这里已经有了答案: Java Math.cos(Math.toRadians()) returns weird values (4 个答案) 关闭 10 年前。我正在编写一个程序，我必须
ios4 - 正弦 180 的值是 1.22465e-16
我想在 ios4 中实现一个正弦和余弦计算器: if([operation isEqual:@"sin"]){ operand = (operand*M_PI/180.0); oper
midi - 正弦 LUT VHDL 不会在 800 hz 以下模拟
我使用 256 个元素为 VHDL 制作了一个正弦 LUT。我使用 MIDI 输入，因此值范围为 8.17Hz(注 #0)到 12543.85z(注 #127)。我有另一个 LUT 计算必须发送到
objective-c - 正弦 180 的值为 1.22465e-16
我想在ios4中实现一个正弦和余弦计算器: if([operation isEqual:@"sin"]){ operand = (operand*M_PI/180.0); operan

首页

博学

6Ren·AI

商城

javascript - 动画正弦波，固定起点和终点

更新