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

作者：我家小花儿 | 2024-05-21 15:53:09

踩

前端樱花动效

<!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>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/603394