首页完成，01-billiard-1.html中创建两个大小、位置和质量都不同的小球。

完成，01-billiard-1.html中创建两个大小、位置和质量都不同的小球。

时间: 2023-12-03 10:47:25 浏览: 105

好的，我们可以使用 HTML5 中的 canvas 元素来创建小球。以下是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Billiards</title> </head> <body> <canvas id="myCanvas" width="500" height="500"></canvas> <script> // 获取 canvas 元素 var canvas = document.getElementById("myCanvas"); // 获取画布上下文 var ctx = canvas.getContext("2d"); // 创建第一个小球 var ball1 = { x: 100, // x 坐标 y: 100, // y 坐标 radius: 30, // 半径 color: "red", // 颜色 mass: 1 // 质量 }; // 创建第二个小球 var ball2 = { x: 300, // x 坐标 y: 300, // y 坐标 radius: 20, // 半径 color: "blue", // 颜色 mass: 0.5 // 质量 }; // 绘制小球 function drawBall(ball) { ctx.beginPath(); ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2); ctx.fillStyle = ball.color; ctx.fill(); ctx.closePath(); } // 绘制两个小球 drawBall(ball1); drawBall(ball2); </script> </body> </html> ``` 在这个示例代码中，我们首先获取了 canvas 元素和上下文，然后创建了两个小球对象 ball1 和 ball2，每个对象都有自己的位置、半径、颜色和质量。接下来，我们使用 drawBall 函数绘制了这两个小球。你可以根据需要更改小球的属性来满足题目要求。

阅读全文