Question

0

200

Views

how 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>

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-06-24T19:05:53.710Z

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>

0

200

how can i adjust middle wave up down position?

1 answers

0

Find remote jobs

Andres GPT