javascript实现下雨效果资源-CSDN文库

67 浏览量 2020-10-20 02:58:04 上传评论收藏 32KB PDF 举报

JavaScript 实现下雨效果在网页设计中，动态的视觉效果可以极大地提升用户体验，其中降雨效果就是一个常见的元素。本文将详细介绍如何使用 JavaScript 来创建一个逼真的降雨效果。我们需要一个 HTML 页面作为基础，包含一个 `<canvas>` 元素，用于绘制我们的动画。在 `<head>` 标签内，我们可以设置页面的基本样式，例如隐藏滚动条、黑色背景等。在 `<body>` 中，我们放置 `<canvas>` 元素，并设置其宽高。 ```html <!doctype html> <html> <head> <meta charset="UTF-8"> <title>梦柯教育-锤子老师</title> <style> body { overflow: hidden; background: black; text-align: center; line-height: 20px; } </style> </head> <body> <canvas id="canvas-club" width="1920" height="666"></canvas> </body> </html> ``` 接下来，我们需要 JavaScript 来生成降雨效果。在 `<script>` 标签内，我们首先获取 `<canvas>` 的 `2D` 上下文（`ctx`），然后定义一些变量，如屏幕宽度（`vw`）、高度（`vh`）以及雨滴的最大透明度（`max`）等。 ```javascript var canvas = document.getElementById('canvas-club'); var ctx = canvas.getContext('2d'); var vw = window.innerWidth; var vh = window.innerHeight; var max = 0.18; // ... ``` 接着，我们需要创建一个表示雨滴的类（`Drop`），包含雨滴的属性（如位置、大小、速度、颜色等）以及更新和绘制的方法。`Drop.prototype.init` 初始化雨滴属性，`Drop.prototype.update` 更新雨滴状态，`Drop.prototype.draw` 绘制雨滴。这些方法会使用 `ctx` 对象进行画布操作，例如设置填充颜色、开始路径、绘制曲线和矩形等。 ```javascript function Drop() { // ... } Drop.prototype.init = function() { // ... }; Drop.prototype.update = function() { // ... }; Drop.prototype.draw = function() { // ... }; ``` 为了创建多滴雨水，我们需要一个数组来存储所有的雨滴实例，并在页面加载时生成这些实例。同时，为了响应窗口大小的变化，我们还需要一个 `resize` 函数来更新画布的尺寸。 ```javascript var drops = []; var A = 100; function setup() { for (var i = 0; i < A; i++) { setTimeout(function() { var drop = new Drop(); drop.init(); drops.push(drop); }, i * 100); } } function resize() { vw = window.innerWidth; vh = window.innerHeight; canvas.width = vw; canvas.height = vh; } window.addEventListener('resize', resize); ``` 我们需要一个主循环函数 `r` 来不断更新和绘制雨滴，确保动画流畅。`r` 函数会清除画布，然后遍历每个雨滴，调用其 `update` 和 `draw` 方法，最后使用 `requestAnimationFrame` 创建下一帧。 ```javascript function r() { ctx.clearRect(0, 0, vw, vh); for (var i in drops) { drops[i].update(); drops[i].draw(); } requestAnimationFrame(r); } window.onload = function() { resize(); setup(); r(); }; ``` 通过以上代码，我们已经成功地创建了一个简单的 JavaScript 下雨效果。当然，这个示例还可以进一步优化，例如增加随机性，让雨滴的大小、速度和方向更自然，或者添加风的效果，使雨滴偏离垂直方向。但作为基本的实现，这个代码已经足够展示如何利用 JavaScript 在网页上实现动态的降雨动画。

资源推荐

资源详情

资源评论

javascript实现下雨效果实现下雨效果

本文主要介绍了javascript实现下雨效果的示例代码。具有很好的参考价值。下面跟着小编一起来看下吧

效果图：效果图：

代码如下：代码如下：

<!doctype html>

<html>

<head>

*{margin:0;padding:0;list-style-type:none;}

a,img{border:0;color:#fff;}

body {

overflow: hidden;

background: black;

text-align: center;

line-height: 20px;

}

</style>

</head>

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('d c=1h.1d("1b-19");d 7=c.14("W");d w=c.I=f.z;d h=c.H=f.G;d E=\'18(0, 0, 0, .15)\';d A=Z;d k=[];e g(a,b){16 1a.g()*(b-a)+a}e O(){}O.X={v:e(){6.x=g(0,w);6.y=0;6.B=\'U(C, m%, D%)\';6.w=2;6.h=1;6.F=g(4,5);6.t=3;6.s=1;6.q=2;6.n=g(h*.8,h*.9);6.a=1;6.J=.V},K:e(){l(6.y>6.n){7.T();7.Y(6.x,6.y-6.h/2);7.L(6.x+6.w/2,6.y-6.h/2,6.x+6.w/2,6.y+6.h/2,6.x,6.y+6.h/2);7.L(6.x-6.w/2,6.y+6.h/2,6.x-6.w/2,6.y-6.h/2,6.x,6.y-6.h/2);7.10=\'11(C, m%, D%, \'+6.a+\')\';7.12();7.13()}u{7.M=6.B;7.N(6.x,6.y,6.q,6.q*5)}6.P()},P:e(){l(6.y<6.n){6.y+=6.F}u{l(6.a>.17){6.w+=6.t;6.h+=6.s;l(6.w>m){6.a*=6.J;6.t*=.Q;6.s*=.Q}}u{6.v()}}}};e p(){w=c.I=f.z;h=c.H=f.G}e R(){S(d i=0;i<A;i++){(e(j){1c(e(){d o=1e O();o.v();k.1f(o)},j*1g)}(i))}}e r(){7.M=E;7.N(0,0,w,h);S(d i 1i k){k[i].K()}1j(r)}f.1k("p",p);R();r();',62,83,'||||||this|ctx||||||var|function|window|random||||drops|if|100|hit||resize|size|anim|vh|vw|else|init||||innerWidth|max|color|180|50|clearColor|vy|innerHeight|height|width|va|draw|bezierCurveTo|fillStyle|fillRect||update|98|setup|for|beginPath|hsl|96|2d|prototype|moveTo|30|strokeStyle|hsla|stroke|closePath|getContext|08|return|03|rgba|club|Math|canvas|setTimeout|getElementById|new|push|200|document|in|requestAnimationFrame|addEventListener'.split('|'),0,{}))

var str = "点击我们学习更多内容";

setTimeout(function(){

document.getElementById("show").innerHTML=str;

},3000)

</script>

</body>

</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余0页未读，立即下载

评论收藏

内容反馈