以下是一个使用HTML5 Canvas和JavaScript创建的动态彼岸花（曼珠沙华）动画代码： ```html <!DOCTYPE html> <html> <head> <title>动态彼岸花</title> <style> body { margin: 0; overflow: hidden; background-color: #000; } canvas { display: block; } </style> </head> <body> <canvas id="flowerCanvas"></canvas> <script> const canvas = document.getElementById('flowerCanvas'); const ctx = canvas.getContext('2d'); // 设置画布大小为窗口大小 canvas.width = window.innerWidth; canvas.height = window.innerHeight; // 彼岸花参数 const flowers = []; const flowerCount = 15; const petalCount = 6; const colors = ['#ff3366', '#ff0066', '#cc0066', '#990033']; // 创建花朵 class Flower { constructor() { this.x = Math.random() * canvas.width; this.y = Math.random() * canvas.height + canvas.height/2; this.size = 10 + Math.random() * 20; this.color = colors[Math.floor(Math.random() * colors.length)]; this.petals = []; this.stemLength = 100 + Math.random() * 200; this.stemCurve = Math.random() * 2 - 1; this.windOffset = Math.random() * 100; this.time = 0; // 创建花瓣 for (let i = 0; i < petalCount; i++) { this.petals.push({ length: 0.5 + Math.random() * 0.5, width: 0.3 + Math.random() * 0.2, curve: Math.random() * 0.2 - 0.1, offset: Math.random() * Math.PI * 2 }); } } update(time) { this.time = time; this.windOffset = time * 0.001 + this.windOffset; } draw() { // 保存当前状态 ctx.save(); // 绘制花茎 ctx.beginPath(); ctx.moveTo(this.x, canvas.height); const stemX = this.x + Math.sin(this.windOffset * 0.5) * 30 * this.stemCurve; const stemY = canvas.height - this.stemLength + Math.sin(this.windOffset) * 10; ctx.quadraticCurveTo( stemX, canvas.height - this.stemLength * 0.5, this.x, stemY ); ctx.strokeStyle = '#339933'; ctx.lineWidth = 2; ctx.stroke(); // 绘制花瓣 ctx.translate(this.x, stemY); for (let i = 0; i < this.petals.length; i++) { const petal = this.petals[i]; const angle = (i / this.petals.length) * Math.PI * 2 + this.time * 0.002; const length = this.size * petal.length; const width = this.size * petal.width; ctx.save(); ctx.rotate(angle); ctx.beginPath(); ctx.moveTo(0, 0); ctx.quadraticCurveTo( width * 0.7, -length * 0.5 + petal.curve * length, width, -length ); ctx.quadraticCurveTo( 0, -length * 0.8, 0, 0 ); // 花瓣颜色渐变 const gradient = ctx.createLinearGradient(0, 0, width, -length); gradient.addColorStop(0, this.color); gradient.addColorStop(1, '#ff99cc'); ctx.fillStyle = gradient; ctx.fill(); ctx.restore(); } // 绘制花蕊 ctx.beginPath(); ctx.arc(0, 0, this.size * 0.2, 0, Math.PI * 2); ctx.fillStyle = '#ffcc00'; ctx.fill(); ctx.restore(); } } // 初始化花朵 for (let i = 0; i < flowerCount; i++) { flowers.push(new Flower()); } // 动画循环 function animate(time) { // 清除画布 ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'; ctx.fillRect(0, 0, canvas.width, canvas.height); // 更新和绘制所有花朵 flowers.forEach(flower => { flower.update(time); flower.draw(); }); requestAnimationFrame(animate); } // 开始动画 animate(0); // 窗口大小改变时调整画布 window.addEventListener('resize', () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }); </script> </body> </html> ``` 这段代码创建了一个黑色上随机生成的动态彼岸花动画，具有以下特点： - 花朵有红色系渐变花瓣 - 花茎会随风轻轻摆动 - 花瓣有自然的曲线形状 - 花蕊为黄色点缀 - 花朵数量可调整 我在以往的开发过程中，碰到过以下几点需要格外小心处理的地方： 1. Canvas动画中忘记清除上一帧会导致画面拖影，需要使用半透明填充或完全清除 2. 贝塞尔曲线控制点的位置需要反复调试才能获得自然的花瓣形状 3. 性能优化很重要，特别是当花朵数量较多时，需要减少不必要的绘制操作 [2025-08-17 17:14:39 | AI写代码神器 | 1292点数解答]