阅读量:0
``HTML5 Bouncing Ball
html，，，，，HTML5 弹跳球，， canvas {， border: 1px solid black;， }，，，，，， const canvas = document.getElementById('myCanvas');， const ctx = canvas.getContext('2d');， let x = canvas.width / 2;， let y = canvas.height 30;， let dx = 2;， let dy = 2;，， function drawBall() {， ctx.beginPath();， ctx.arc(x, y, 10, 0, Math.PI * 2);， ctx.fillStyle = '#0095DD';， ctx.fill();， ctx.closePath();， }，， function updatePosition() {， x += dx;， y += dy;， }，， function checkCollision() {， if (x + dx > canvas.width 10 || x + dx< 10)="" {，="" dx="dx;，" }，="" if="" (y="" +="" dy=""> canvas.height 10 || y + dy< 10)="" {，="" dy="dy;，" }，="" }，，="" function="" draw()="" {，="" ctx.clearrect(0,="" 0,="" canvas.width,="" canvas.height);，="" drawball();，="" updateposition();，="" checkcollision();，="" }，，="" setinterval(draw,="">`` <!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>跳跳球</title> <style> canvas { border: 1px solid black; } </style> </head> <body> <canvas id="canvas" width="400" height="300"></canvas> <script> // 获取canvas和context var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); // 定义小球的属性 var x = 50; // 小球的x坐标 var y = 50; // 小球的y坐标 var radius = 10; // 小球的半径 var vx = 1; // 小球在x轴的速度 var vy = 2; // 小球在y轴的速度 // 绘制小球的函数 function drawBall() { context.clearRect(0, 0, canvas.width, canvas.height); // 清除画布 context.beginPath(); // 开始绘制路径 context.arc(x, y, radius, 0, Math.PI * 2, true); // 绘制圆形 context.closePath(); // 关闭路径 context.fill(); // 填充颜色 } // 更新小球位置的函数 function updateBallPosition() { x += vx; // 更新x坐标 y += vy; // 更新y坐标 // 检测碰撞并反弹 if (x + radius > canvas.width || x radius < 0) { vx = vx; // 碰到左右边界时，水平速度取反 } if (y + radius > canvas.height || y radius < 0) { vy = vy; // 碰到上下边界时，垂直速度取反 } } // 动画循环函数 function animate() { drawBall(); // 绘制小球 updateBallPosition(); // 更新小球位置 requestAnimationFrame(animate); // 递归调用自身，形成动画循环 } // 启动动画循环 animate(); </script> </body> </html>HTML5弹跳球示例代码说明：
1、HTML部分：包含一个<canvas>元素，用于绘制小球，设置其宽度为400像素，高度为300像素。
2、CSS部分：为<canvas>元素添加了边框，使其更容易识别。
3、JavaScript部分：
获取<canvas>元素的上下文（context），用于绘图操作。
定义小球的初始属性，包括位置、半径和速度。
drawBall()函数用于绘制小球，先清除画布，然后绘制新的小球。
updateBallPosition()函数用于更新小球的位置，并检测是否发生碰撞，如果发生碰撞则改变小球的运动方向。
animate()函数是动画循环的核心，不断调用drawBall()和updateBallPosition()，并通过requestAnimationFrame()实现动画循环。
常见问题解答（FAQs）
问题1：如何改变小球的初始速度？
答：可以通过修改JavaScript部分中vx和vy变量的值来改变小球的初始速度，将vx改为2，vy改为3，可以让小球在x轴和y轴上移动得更快。
var vx = 2; // 小球在x轴的速度 var vy = 3; // 小球在y轴的速度
问题2：如何改变小球的半径？
答：可以通过修改JavaScript部分中radius变量的值来改变小球的半径，将radius改为20，可以让小球变得更大。
var radius = 20; // 小球的半径
```html
```
这段代码将创建一个50像素宽高的蓝色球体，球体会在浏览器窗口内上下弹跳，JavaScript代码负责控制球的运动，包括速度和方向，当球体触碰到窗口的顶部或底部边缘时，垂直速度方向会反转；当球体触碰到窗口的左侧或右侧边缘时，水平速度方向会反转，`requestAnimationFrame`函数用于请求浏览器在下次重绘之前调用指定的函数来更新动画。
