首页在h5中实现一个向下一直持续流动水的瀑布动画，带注释，完整代码

在h5中实现一个向下一直持续流动水的瀑布动画，带注释，完整代码

时间: 2024-02-06 22:09:27 浏览: 152

以下是基于HTML5 Canvas实现的向下一直持续流动水的瀑布动画示例代码，带注释： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Waterfall Animation</title> </head> <body>  <canvas id="myCanvas"></canvas> <script> // 获取 canvas 元素 var canvas = document.getElementById("myCanvas"); // 设置画布宽高 canvas.width = window.innerWidth; canvas.height = window.innerHeight; // 获取画布上下文 var ctx = canvas.getContext("2d"); // 定义瀑布流每个小水滴的属性 var drops = []; for(var i = 0; i < 100; i++) { drops.push({ x: Math.random() * canvas.width, // 水滴的起始横坐标（随机） y: Math.random() * canvas.height, // 水滴的起始纵坐标（随机） r: Math.random() * 5 + 2, // 水滴的半径（随机） d: Math.random() * 10 // 水滴掉落速度（随机） }); } // 定义绘制水滴的函数 function draw() { // 清空画布 ctx.clearRect(0, 0, canvas.width, canvas.height); // 绘制每个水滴 for(var i = 0; i < drops.length; i++) { // 绘制圆形水滴 ctx.beginPath(); ctx.arc(drops[i].x, drops[i].y, drops[i].r, 0, Math.PI * 2); ctx.fillStyle = "rgba(0, 191, 255, 0.5)"; ctx.fill(); // 计算下一帧水滴的位置 drops[i].y += drops[i].d; // 如果水滴超出画布底部，则重新生成 if(drops[i].y > canvas.height) { drops[i].y = Math.random() * -100; // 水滴的起始纵坐标（随机） drops[i].x = Math.random() * canvas.width; // 水滴的起始横坐标（随机） } } } // 每帧绘制函数 function animate() { requestAnimationFrame(animate); // 请求下一帧 draw(); // 绘制水滴 } // 开始动画 animate(); </script> </body> </html> ``` 运行以上代码，即可在浏览器中看到一个向下一直持续流动水的瀑布动画。

阅读全文