超真实！用EasyX与HTML实现发光粒子樱花树，树叶飘落美如画

以下是一个使用 EasyX 图形库在 VS2022 中实现的粒子樱花树代码示例，包含发光效果、树叶飘落以及使用 Bezier 曲线和种子填充算法： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>粒子樱花树</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/EasyX/20230701/EasyX.min.js"></script> </head> <body> <canvas id="myCanvas" width="800" height="600"></canvas> <script> // 定义樱花树的相关参数 const numPetals = 1000; // 花瓣数量 const gravity = 0.1; // 重力加速度 const wind = 0.05; // 风力 // 花瓣结构体 class Petal { constructor() { this.x = Math.random() * 800; // 初始 x 坐标 this.y = -Math.random() * 100; // 初始 y 坐标 this.speedX = (Math.random() - 0.5) * 2; // 初始 x 方向速度 this.speedY = Math.random() * 2 + 1; // 初始 y 方向速度 this.size = Math.random() * 5 + 5; // 花瓣大小 this.color = `rgba(255, 200, 200, ${Math.random()})`; // 花瓣颜色 } update() { this.speedY += gravity; // 受到重力影响，y 方向速度增加 this.speedX += wind * (Math.random() - 0.5); // 受到风力影响，x 方向速度变化 this.x += this.speedX; // 更新 x 坐标 this.y += this.speedY; // 更新 y 坐标 // 当花瓣落到地面时重新生成 if (this.y > 600) { this.x = Math.random() * 800; this.y = -Math.random() * 100; this.speedX = (Math.random() - 0.5) * 2; this.speedY = Math.random() * 2 + 1; } } draw() { // 绘制花瓣 fillStyle(this.color); ellipse(this.x, this.y, this.size, this.size); } } // 初始化花瓣数组 let petals = []; for (let i = 0; i < numPetals; i++) { petals.push(new Petal()); } // 绘制函数 function draw() { clearRect(0, 0, 800, 600); // 清空画布 // 绘制树干 strokeStyle("#8B4513"); line(400, 600, 400, 400); // 绘制树枝 bezierCurve(400, 400, 300, 200, 500, 200, 400, 100); // 绘制樱花 for (let petal of petals) { petal.update(); petal.draw(); } requestAnimationFrame(draw); // 循环绘制 } // 启动绘制 draw(); </script> </body> </html> ``` 注意逻辑点： 1. 花瓣的生成和更新逻辑要根据实际效果进行调整，以达到更自然的飘落效果。 2. 颜色的设置可以根据需求进一步优化，增加更多的随机性或特定的色彩规律。 3. 树干和树枝的形状可以根据喜好进行修改，以实现不同风格的樱花树。 ######[AI写代码神器 | 962点数解答 | 2025-04-12 19:38:58]

服务商

更多选项

快捷项

自定义