在没有构造函数的情况下，使canvas元素掉落的最佳方法是什么？

Question

我有一个具有鸟类功能的画布。基本上它只是在画布中创建一个弧。我想要的是有另一个函数来获取这个弧并导致它在不使用构造函数的情况下掉落。我试图了解画布中的动作，我希望这是一种非常基本的动作类型。

x = 25;
y = 300;

function bird() {
    canvas;
    ctx;
    ctx.beginPath();
    ctx.arc(x,y,5,0,2*Math.PI);
    ctx.fillStyle="white";
ctx.stroke();
ctx.fill();

Answer 1

基本画布动画

要制作动画，您需要重新绘制我们每秒动画多次的对象。

渲染功能

因此我们创建了一个绘制内容的函数，我们为此函数添加了一些参数，用于描述我们希望随时间变化的部分。

function drawBall(x,y){  // the x and y position of a ball
    ctx.beginPath(); // start a new shape
    ctx.arc(x, y, 10, 0, Math.PI *2);
    ctx.stroke();
}

我们需要每秒多次调用上面的函数，每帧重绘一个稍微不同的位置（帧是我们在动画中称为一个图像）

帧

对于浏览器，有一个特殊功能，专门用于运行一个功能，该功能可以绘制一个同步到显示硬件的帧并提供流畅的动画。 requestAnimationFrame

requestAnimationFrame被赋予对浏览器准备好绘制帧时调用的函数的依据。在该功能中，我们可以完成更新框架所需的一切。

var ballX = 100;  // the start position of the ball
var ballY = 20;
requestAnimationFrame(update); // ask for a frame
function update(){
    ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height); // clears the canvas
    ballY += 2; // move the ball position down a little
    // now call the function that draws the ball
    drawBall(ballX,ballY);
    requestAnimationFrame(update); // ask for the next frame
}

这就是如何在最基本的水平上制作动画。

上面的代码是愚蠢的，即使球通过画布的底部，它仍然会继续前进。你可能希望球在某个时刻停止或弹跳，当某些东西在每个时刻下降时，由于重力的作用，它会更快一些。

球随着弹跳而下降。

这可以使用与上面相同的代码结构来完成，但是需要更多的逻辑和更多的变量。下面的演示显示了一个非常基本的球弹跳。

// set up the canvas
const canvas = myCanvas; // ge the canvas element by its unique id
const ctx = canvas.getContext("2d"); // get a 2d drawing context

// function to draw the ball
function drawBall(x,y,radius){  // the x and y position of a ball
    ctx.beginPath(); // start a new drawing
    ctx.arc(x, y, radius, 0, Math.PI *2);
    ctx.stroke();
}

var ballX = 100;  // the start position of the ball
var ballY = 20;
// speed of the ball in the x amd y directions
var ballXSpeed = 0; // start speed is zero
var ballYSpeed = 0; // start speed is zero
var ballRadius = 10;
const gravity = 0.2; // strength of gravity
requestAnimationFrame(update); // ask for a frame
function update(){
    ctx.clearRect(0,0,canvas.width,canvas.height); // clears the canvas
    ballYSpeed += gravity; // increase the ball speed down by the force of gravity    
    ballY += ballYSpeed; // move the ball
    ballX += ballXSpeed; // move the ball
    // Now check if the ball posistion is such that it is touching the
    // bottom of the canvas. This is not a perfect bounce as it 
    // does not bother with the fact that over the time since the last frame
    // the ball hit the bottom at some time between, we dont calculate when.
    // Because of this the ball losses a little energy each bounce.
    if(ballY + ballRadius >= canvas.height){
        ballY = canvas.height - ballRadius; // position the ball touching the bottom
        ballYSpeed = -ballYSpeed; // reverse the ball direction
    }
    // now call the function that draws the ball
    drawBall(ballX,ballY,ballRadius);
    requestAnimationFrame(update); // ask for the next frame
}

canvas {
   border : 2px solid black;
}

<canvas id=myCanvas width=500 height=200></canvas>