如何调整中间的位置向上挥手？

发布于 2025-02-08 01:15:10 字数 1727 浏览 0 评论 0原文

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

我已经附加了我真正想要的图像。

如果您想从我这边提供更多信息，请在评论中告诉我。谢谢

这是我的代码。

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>

原文

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

童话 2025-02-15 01:15:10

这是：

您需要在这里使用此行：

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>

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);
}