HTML画布浮动效果

可能的修复（随着时间的推移，效率/性能问题？

我试图在HTML5画布中重新创建“浮动”效果。 我想做的是让图像上下浮动。 绘制图像并运行float（）函数以计算图像的下一个y位置。我已经让它向下或向上浮动，但不知道如何在图像浮动后改变方向，例如100px（向上或向下）。我该怎么做

我已经在这里上传了画布：

你可以看到，图像向下浮动，然后变慢。在它停止移动后，我想改变浮动方向。

float（）

函数就是我尝试这样做的地方

   // Request animation frame
    const requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

    // Canvas
    const c = document.getElementById('canvas');
    const ctx = c.getContext('2d');

    // Set full-screen
    c.width = window.innerWidth;
    c.height = window.innerHeight;

    // Framerate settings
    // Better not touch theese if you
    // do not know what you are doing
    let fps = (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) ? 29 : 60;
    let now, delta;
    let then = Date.now();
    const interval = 1000 / fps;

    // Preparation below this comment line
    const background = new Image();
    const cheshire = new Image();
    const images = [background, cheshire];
    var imagesCount = images.length;

    background.onload = cheshire.onload;
    background.src = 'bg.png';
    cheshire.src = 'cheshire.png';

    let originalXPos = c.width / 2 - images[1].width / 2;
    let originalYPos = c.height / 2 - images[1].height / 2;
    let xPos = c.width / 2 - images[1].width / 2;
    let yPos = c.height / 2 - images[1].height / 2;
    let xVel = 0;
    let yVel = .5;

    // Draw
    function draw() {

        // Loop
        requestAnimationFrame(draw);
        now = Date.now();
        delta = now - then;

        if (delta > interval) {

            // Calculate then
            then = now - (delta % interval);

            // All your own stuff here
            drawImages();
            float();

        }

    }

    // Draw background
    function drawImages() {
        ctx.drawImage(images[0], 0, 0)
        ctx.drawImage(images[1], xPos, yPos);
    }

    function float() {

        yPos += 1 / yVel;
        yVel += .05;

        // IF the image has floated 100 px (up or down)
        // change direction

    }

    // Returns an random integer between
    // min and max
    function randInt(min, max) {
        max = max === undefined ? min - (min = 0) : max;
        return Math.floor(Math.random() * (max - min) + min);
    }

    // Cursor coordinates X & Y
    function clicked(e) {

        let x, y;

        if (e.offsetX) {
            x = e.offsetX;
            y = e.offsetY;
        } else if (e.layerX) {
            x = e.layerX;
            y = e.layerY;
        }

        // Do something...

    }

    $('canvas').on('click', function(e) {
        clicked(e);
    });

    requestAnimationFrame(draw);nter code here

---

在问题中给出的代码中向下浮动

// in the draw function
xPos += xVel;
yPos += yVel;

然后检查

yPos

是否超过某个点，如果是，则改变方向

const bottom = ctx.canvas.height - 300; // put somewhere with globals 
if(yPos > bottom){ // is pos past bottom
   yVel = -0.5; // change direction
   yPos = bottom; // make sure yPos does not render past bottom
}

顶部也一样

const top = 100; // put somewhere with globals 
if(yPos < top){ // is pos past top
   yVel = 0.5; // change direction
   yPos = top; // make sure yPos does not render past top
}

const top=100；//把球放在某个地方
如果（yPos

在问题中给出的代码中向下浮动

// in the draw function
xPos += xVel;
yPos += yVel;

然后检查

yPos

是否超过某个点，如果是，则改变方向

const bottom = ctx.canvas.height - 300; // put somewhere with globals 
if(yPos > bottom){ // is pos past bottom
   yVel = -0.5; // change direction
   yPos = bottom; // make sure yPos does not render past bottom
}

顶部也一样

const top = 100; // put somewhere with globals 
if(yPos < top){ // is pos past top
   yVel = 0.5; // change direction
   yPos = top; // make sure yPos does not render past top
}

const top=100；//把球放在某个地方
如果（yPos

找到了更好的解决方案。我真的不知道它是否有效，因为随着时间的推移，

I

将变得非常大。但我现在得到的解决方案是：让I=0；函数float（）{yPos+=Math.sin（i）；i+=.01*yVel；}找到了一个更好的解决方案。我真的不知道它是否有效，因为随着时间的推移，

I

将变得非常大。但我现在得到的解决方案是：让I=0；函数float（）{yPos+=Math.sin（i）；i+=.01*yVel；}