0
206
Vistas¿Cómo puedo ajustar la posición de arriba hacia abajo de la onda media?
Me he quedado atascado en hacer que las olas se vean como yo quiero. Estoy tratando de averiguar cómo hacer que el medio de la ola sea igual a la imagen adjunta.
He adjuntado una imagen de lo que realmente quiero. 
Déjame saber en un comentario si quieres más información de mi parte. Gracias
Aquí está mi código.
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 Respuestas
Responde la pregunta0
Aquí está:
Necesitas jugar con esta línea aquí:
var bk=makeWave(canvas.width,canvas.height-120,80,2,'lightskyblue','cornflowerblue');Modifique los números, y el número del medio hará la cosa. Vea el ejemplo a continuación:
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
Denunciar
Responde la pregunta