canvas小球落体

Canvas小球落体是一种常见的网页动画示例，通常用于展示JavaScript对HTML5 Canvas API的理解和应用。在这个场景中，开发者会创建一个圆形的小球，并通过CSS样式将其悬停在Canvas上。当用户点击或触动小球时，小球会在重力作用下开始沿一定的轨迹向下滚动。

以下是实现这个效果的基本步骤：

1. **初始化**：设置Canvas大小、背景色，以及小球的初始位置、半径和颜色。
2. **事件监听**：添加点击事件监听器，当用户点击时触发小球下落过程。
3. **绘制小球**：使用`arc()`方法在Canvas上画出小球形状。
4. **更新位置**：在每帧（如setInterval函数）中检查小球是否达到底部边界，如果未达则根据重力加速度改变小球的y坐标。
5. **动画循环**：继续上述过程，直到小球落地或用户停止交互。

// 初始化变量
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var ballX = canvas.width / 2;
var ballY = canvas.height - 50;
var gravity = 0.5;
var radius = 20;
var ballColor = '#FF0000';

// 绘制小球
function drawBall() {
    ctx.beginPath();
    ctx.arc(ballX, ballY, radius, 0, Math.PI * 2);
    ctx.fillStyle = ballColor;
    ctx.fill();
}

// 更新并绘制小球
function updateBall() {
    if (ballY + radius >= canvas.height) {
        // 小球已落地，结束运动
        clearInterval(intervalId);
    } else {
        ballY += gravity;
        drawBall();
    }
}

// 点击事件处理
canvas.addEventListener('click', function() {
    intervalId = setInterval(updateBall, 10); // 每10ms更新一次
});

drawBall(); // 初始绘制