如何调整中波上下位置？

Question

我一直坚持让海浪看起来像我想要的那样。 我试图弄清楚如何让波浪的中间与所附图像相同。

我附上了一张我真正想要的图片。

如果您想从我这里获得更多信息，请在评论中告诉我。 谢谢

这是我的代码。

 var canvas=document.getElementById('wave'); var ctx=canvas.getContext('2d'); var cw=Number(window.innerWidth); var ch=Number(window.innerHeight); canvas.width = Number(window.innerWidth); canvas.height = Number(window.innerHeight); var offsetX=0; var bk=makeWave(canvas.width,canvas.height-120,80,2,'lightskyblue','cornflowerblue'); requestAnimationFrame(animate); function animate(time){ ctx.clearRect(0,0,cw,ch); ctx.drawImage(bk,offsetX,0); offsetX-=1; if(offsetX< -bk.width/2){offsetX=0;} // requestAnimationFrame(animate); } function makeWave(width,midWaveY,amplitude,wavesPerWidth,grad0,grad1){ var PI2=Math.PI*2; var totValue=PI2*wavesPerWidth; var c=document.createElement('canvas'); var ctx=c.getContext('2d'); c.width=width*2; c.height=midWaveY+amplitude; var grad=ctx.createLinearGradient(0,0,0,midWaveY); grad.addColorStop(0.00,grad0); grad.addColorStop(1.00,grad1); // ctx.beginPath(); ctx.moveTo(0,0); for (x=0;x<=200;x++) { var n=totValue*x/134; ctx.lineTo(width*x/100,Math.sin(n)*amplitude+midWaveY); } ctx.lineTo(c.width,0); ctx.closePath(); ctx.fillStyle=grad; ctx.fill(); return(c); }

 <canvas id="wave"></canvas>

Answer 1

这里是：

你需要在这里玩这条线：

var bk=makeWave(canvas.width,canvas.height-120,80,2,'lightskyblue','cornflowerblue');

调整数字，中间的数字就可以了。 请参见下面的示例：

 var canvas=document.getElementById('wave'); var ctx=canvas.getContext('2d'); var cw=Number(window.innerWidth); var ch=Number(window.innerHeight); canvas.width = Number(window.innerWidth); canvas.height = Number(window.innerHeight); var offsetX=0; var bk=makeWave(canvas.width,canvas.height-120,25,2,'lightskyblue','cornflowerblue'); requestAnimationFrame(animate); function animate(time){ ctx.clearRect(0,0,cw,ch); ctx.drawImage(bk,offsetX,0); offsetX-=1; if(offsetX< -bk.width/2){offsetX=0;} // requestAnimationFrame(animate); } function makeWave(width,midWaveY,amplitude,wavesPerWidth,grad0,grad1){ var PI2=Math.PI*2; var totValue=PI2*wavesPerWidth; var c=document.createElement('canvas'); var ctx=c.getContext('2d'); c.width=width*2; c.height=midWaveY+amplitude; var grad=ctx.createLinearGradient(0,0,0,midWaveY); grad.addColorStop(0.00,grad0); grad.addColorStop(1.00,grad1); // ctx.beginPath(); ctx.moveTo(0,0); for (x=0;x<=200;x++) { var n=totValue*x/134; ctx.lineTo(width*x/100,Math.sin(n)*amplitude+midWaveY); } ctx.lineTo(c.width,0); ctx.closePath(); ctx.fillStyle=grad; ctx.fill(); return(c); }

 <canvas id="wave"></canvas>