首页用JavaScript写一个代码实现有一个杯子然后烟花从杯子中放出来

用JavaScript写一个代码实现有一个杯子然后烟花从杯子中放出来

时间: 2024-05-01 18:22:54 浏览: 18

以下是一个简单的 JavaScript 代码示例，演示如何在网页上绘制一个杯子并通过 canvas 绘制烟花： ```html <!DOCTYPE html> <html> <head> <title>烟花从杯子中放出来</title> <meta charset="utf-8" /> </head> <body> <canvas id="myCanvas" width="500" height="500"></canvas> <script> const canvas = document.getElementById("myCanvas"); const ctx = canvas.getContext("2d"); // 绘制杯子 ctx.beginPath(); ctx.moveTo(100, 200); ctx.lineTo(200, 200); ctx.lineTo(200, 300); ctx.lineTo(150, 350); ctx.lineTo(100, 300); ctx.closePath(); ctx.fillStyle = "#FFDAB9"; ctx.fill(); // 绘制烟花 for (let i = 0; i < 20; i++) { let x = Math.random() * 100 + 100; let y = Math.random() * 100 + 200; let r = Math.random() * 10 + 5; let color = "#" + ((1 << 24) * Math.random() | 0).toString(16); ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fillStyle = color; ctx.fill(); } </script> </body> </html> ``` 在上述代码中，我们首先获取了一个 `canvas` 元素并创建了一个 `CanvasRenderingContext2D` 对象 `ctx`，用于在画布上绘制图形。然后使用 `ctx.beginPath()` 和 `ctx.closePath()` 方法来创建杯子的路径，并使用 `ctx.fill()` 方法来填充颜色。最后使用一个 for 循环绘制烟花，使用 `ctx.arc()` 方法创建圆形路径，并使用随机颜色和大小填充。你可以在浏览器中打开此 HTML 文件，看到一个杯子和随机生成的烟花。