0
210
Visualizaçõeshow can i adjust middle wave up down position?
I have been stuck on getting the waves to look just like I want. I'm trying to figure out how to get the middle of the wave to be the same as the attached image.
I have attached an image of what I actually want.
Let me know in a comment if you want more info from my side. Thanks
Here is my code.
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>
·
Juan Pablo Isaza
1 Respostas
Responde à pergunta0
Here it is:
You need to play with this line here:
var bk=makeWave(canvas.width,canvas.height-120,80,2,'lightskyblue','cornflowerblue');
Tweak the numbers, and the middle number will do the thing. See example below:
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>
·
Juan Pablo Isaza
Relatório
Responde à pergunta