canvas实现小球来回移动

在HTML5 Canvas上实现一个来回移动的小球，你可以按照以下步骤操作：

1. **创建Canvas元素**：在HTML文件中添加一个`<canvas>`标签，并给它设置宽度和高度。

<canvas id="myCanvas" width="800" height="600"></canvas>

2. **获取Canvas上下文**：在JavaScript中获取canvas元素并获取其2D渲染上下文。

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

3. **定义小球属性**：包括位置、半径、颜色等。

var ballX = canvas.width / 2;
var ballY = canvas.height / 2;
var ballRadius = 10;
var color = 'red';

4. **绘制小球**：在每个动画循环里，用`ctx.arc()`方法绘制小球。

function drawBall() {
    ctx.beginPath();
    ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
    ctx.fillStyle = color;
    ctx.fill();
    ctx.closePath();
}

5. **移动小球并检测边界**：每次更新时，检查小球是否碰到边缘，然后调整它的位置。

if (ballX <= ballRadius || ballX >= canvas.width - ballRadius) {
    ballSpeedX = -ballSpeedX; // 当碰到左边或右边时反转X轴速度
}

if (ballY <= ballRadius || ballY >= canvas.height - ballRadius) {
    ballSpeedY = -ballSpeedY; // 当碰到上面或下面时反转Y轴速度
}

ballX += ballSpeedX;
ballY += ballSpeedY;
drawBall();

6. **定时器或requestAnimationFrame**：设置定时器或利用浏览器提供的requestAnimationFrame方法来定期执行这个移动和绘制的过程。

setInterval(function() { moveAndDraw(); }, 10); // 每10毫秒执行一次

7. **停止和开始动画**：你可以添加开关函数来控制动画的播放或暂停。

这只是一个基础示例，实际应用中可能需要处理更多的细节，例如小球的旋转或动画效果。