正弦波动画

这是我要实现的效果：链接

我已经得到了四波，它们确实是动画的，但是我一直坚持给他们每个人的动画略有不同。在当前点，所有曲线以相同的速度，相同的方向移动，并在同一位置切换。它们在所有这些方面都应略有不同。我正在寻找的最终结果非常类似于我发布的链接，不同的是，每个波只能有一个周期，它一次上升一次，一次下降。谢谢您的意见。

以下是我的代码：

function start() {  
  var canvas = $("canvas");
  console.log(canvas);
  canvas.each(function(index, canvas) {
      var context = canvas.getContext("2d"); 
      canvas.width = $(".box").eq(index).width();
      canvas.height = $(".box").eq(index).height();
      context.clearRect(0, 0, canvas.width, canvas.height);
      drawCurves(context, step);
      step += 1;
  });
  requestAnimationFrame(start);
}
var step = -1;
function drawCurves(ctx, step) {
    var width = ctx.canvas.width;
    var height = ctx.canvas.height;
    ctx.lineWidth = 2;
    
  for (i = 0; i < 4 ; i++) {    
    var x = 0;
    var y = 0;
    ctx.beginPath();
    if (i === 0 ) {
      ctx.strokeStyle = "red";
      var amplitude = 20;
     var frequency = height / (2 * Math.PI) ; 
      console.log(i, frequency);
     }  if ( i === 1) {
         ctx.strokeStyle = "blue";
       var amplitude = 30;
      var frequency = (height / (2 * Math.PI));
      console.log(i, frequency);
     }  if ( i === 2) {
          ctx.strokeStyle = "green";
       var amplitude = 40;
       var frequency = height / (2 * Math.PI) ;
      console.log(i, frequency);     
     }  if (i === 3) {
       ctx.strokeStyle = "yellow";
       var amplitude = 50;
      var frequency = height / (2 * Math.PI) ;
      console.log(i, frequency);
     }
  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();
}
  }
$(document).ready(function() {
  start();
})

<!DOCTYPE html>
<html>
<head>
</head>
<body>
   
  <div class="box">
       <canvas id="canvas"></canvas>
    </div>
  <div class="box">
       <canvas id="canvas"></canvas>
    </div>
  
</body>
</html>

和这里的代码笔

您的代码仅绘制一个鼻窦波。我会建议您这些观点：

_如果您想要不同的(同时(波，则在绘制点使用不同的x/y值。

_您使用$(document(.dready(function(function((作为动画循环，这不是更好的方法。对于动画，您应该设置一个setInterval或更好地使用旨在创建动画的RequestAnimationFrame。动画循环绘制了4条鼻窦线，我会忘记使用对象的步骤，以至于我认为更好，但这不是重要的一点。我没有时间尝试您的代码，但是当使用requestAnimationFrame(start(start(((时(而不是$ document。显然，在每个动画中，都可以使用透明表(宽度，高度(清除图形位置；例如。

_在同一笛卡尔方程中，4个步骤将 1添加到 4。在鼻窦曲线中，它不会真正被人眼看到，因为这确实是一个微小的变化。您可以使用不同的方程来使用不同的方程式，每个步骤/对象，即Math.sin(y( 10或Math.sin(y(*10等...甚至对于每个不同对象的数字(y(*10等。_i'将避免翻译并使用for for for for for loop来增加x值并使用sin(x(和任何您需要的方程式获得y值，这是个人选择，但会避免编写.translate((行并将使用正常的坐标。而不是移动的坐标，因此您可以轻松地在console.log canvas区域内看到真实的坐标。

_如果您在数组中使用objets(并循环(并设置了4个Objets中的每一个。

希望这有帮助，没有时间编写干净的代码。

@enxaneta谢谢您的输入！在下面是我想要的方式，是我的解决方案：

var step = 0;
		
function start(timestamp) {
  			var canvas = $("canvas");
  			canvas.each(function(index, canvas) {
    			  var context = canvas.getContext("2d"); 
      			  canvas.width = $(".box").eq(index).width();
      			  canvas.height = $(".box").eq(index).height();
      			  context.clearRect(0, 0, canvas.width, canvas.height);
      			  if (canvas.height > 1000 ) {
      			  	drawWave(context, 20,"sin");
      			  	drawWave(context, 60,"cos");
      			  	drawWave(context, 40,"sin");
      			  	drawWave(context, 80,"cos"); 
      			  }
      			  if (canvas.height < 1000 ) {
      			  	drawWave(context, 10,"sin");
      			  	drawWave(context, 30,"cos");
      			  	drawWave(context, 20,"sin");
      			  	drawWave(context, 40,"cos"); 
      			  }
   				  
   				  step = timestamp / 7;
  			});
        window.requestAnimationFrame(start);
		}
		function drawWave(ctx,amplitude,trig){
  			var width = ctx.canvas.width;
  			var height = ctx.canvas.height;
  			ctx.beginPath();
  			ctx.lineWidth = 2;
  			ctx.strokeStyle = "blue";
  			var x = 0;
  			var y = 0;
  			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.closePath();
  			ctx.stroke();
  			ctx.restore();
		}
$(document).ready(function() {
  start();
});

canvas {
  background-color: wheat;
  position: absolute;
}
.box {
width: 500px;
 height: 2000px;
  border: solid;
}
.box.t {
width: 500px;
 height: 200px;
  border: solid;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
     <div class="box t">
       <canvas id="canvas"></canvas>
    </div>
  
  <div class="box">
       <canvas id="canvas"></canvas>
    </div>
</body>
</html>

相关内容

最新更新

热门标签：