这是比较简单的动态樱花特效

最新推荐文章于 2024-09-05 23:00:26 发布

李浩东@

最新推荐文章于 2024-09-05 23:00:26 发布

阅读量357

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.youkuaiyun.com/m0_64180190/article/details/134336450

版权

本文介绍了一个使用HTML5Canvas和JavaScript实现的动态樱花动画，通过随机生成樱花的位置、大小和运动轨迹，展示了基础的2D图形绘制和动画循环。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html> <html> <head> <title>动态樱花动画特效</title> <style> body { margin: 0; overflow: hidden; } canvas { display: block; } </style> </head> <body> <canvas id="cherryBlossoms"></canvas> <script> // 创建Canvas元素 var canvas = document.getElementById("cherryBlossoms"); var ctx = canvas.getContext("2d"); // 设置Canvas尺寸 canvas.width = window.innerWidth; canvas.height = window.innerHeight; // 樱花数组 var cherryBlossoms = []; // 创建樱花 function createCherryBlossom() { var cherryBlossom = { x: Math.random() * canvas.width, y: Math.random() * canvas.height, size: Math.random() * 10 + 5, speedX: Math.random() * 2 - 1, speedY: Math.random() * 2 + 1, angle: Math.random() * 360, rotation: Math.random() * 0.1 - 0.05 }; cherryBlossoms.push(cherryBlossom); } // 更新樱花 function updateCherryBlossoms() { for (var i = 0; i < cherryBlossoms.length; i++) { var cherryBlossom = cherryBlossoms[i]; cherryBlossom.x += cherryBlossom.speedX; cherryBlossom.y += cherryBlossom.speedY; cherryBlossom.angle += cherryBlossom.rotation; if (cherryBlossom.y > canvas.height) { cherryBlossoms.splice(i, 1); } } } // 绘制樱花 function drawCherryBlossoms() { for (var i = 0; i < cherryBlossoms.length; i++) { var cherryBlossom = cherryBlossoms[i]; ctx.save(); ctx.translate(cherryBlossom.x, cherryBlossom.y); ctx.rotate(cherryBlossom.angle * Math.PI / 180); ctx.beginPath(); ctx.arc(0, 0, cherryBlossom.size, 0, Math.PI * 2); ctx.closePath(); ctx.fillStyle = "#FFC0CB"; ctx.fill(); ctx.restore(); } } // 动画循环 function loop() { ctx.clearRect(0, 0, canvas.width, canvas.height); if (Math.random() < 0.05) { createCherryBlossom(); } updateCherryBlossoms(); drawCherryBlossoms(); requestAnimationFrame(loop); } // 启动动画循环 loop(); </script> </body> </html>