以下是HTML代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style></style><script src="下雨.js"></script>
</head>
<body>
<script>Rain({speed:[2,40],hasBounce:true,wind_direction:340,gravity:0.05,maxNum:80,numLevel:5,drop_chance:0.4,cloud:true});</script>
</body>
</html>

--------------------------------------------------------------------------------------------------------------------------------

以下是JS代码,需要保存在javascript file包中:

var canvas, ctx, DPR, options, canvasWidth, canvasHeight, wind_anger;
var hasBounce, maxNum, numLevel, speed, wind_direction, drop_chance, gravity;
var speed_x, speed_y;
var mySpeed, myAngle;
let windX = 1;
var angle = [];
var drops = [],bounces = [];
var image;
//灏嗚搴︿箻浠� 0.017453293 锛�2PI/360锛夊彲杞崲涓哄姬搴︺€�
var eachAnger = 0.017453293;window.requestAnimFrame =window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||window.oRequestAnimationFrame ||window.msRequestAnimationFrame ||function(callback) {window.setTimeout(callback, 1000 / 30);};function Rain(opts) {options = opts;canvas = document.createElement("canvas");document.body.appendChild(canvas);canvas.style.position = "fixed";canvas.style.top = 0;canvas.style.zIndex = 1000;canvas.style.pointerEvents = "None";canvas.style.width = window.innerWidth + "px";canvas.style.height = window.innerHeight + "px";ctx = canvas.getContext("2d");DPR = window.devicePixelRatio;canvas.width = canvas.clientWidth * DPR;canvas.height = canvas.clientHeight * DPR;// 鑾峰彇璁剧疆鐨勫€�speed = opts.speed || [10, 100]; //椋庨€熻寖鍥达紝鍒濆鍊煎姞闅忔満鑼冨洿mySpeed = new getBetween(3)myAngle = new getBetween(1.5)hasBounce = opts.hasBounce == undefined ? true : opts.hasBounce; //鏄惁鏈夊弽寮规晥鏋渙r false,// 鏈€澶ц搴︿负鐢诲竷鐨勫彸涓婅鍒板乏涓嬭锛堟垨宸︿笂瑙掑埌鍙充笅瑙掞級var wind_max = 270 + Math.atan(canvas.width / canvas.height) / eachAnger;var wind_min = 270 - Math.atan(canvas.width / canvas.height) / eachAnger;angle[0] = wind_min + 20;angle[1] = wind_max - 20;//椋庣殑瑙掑害if (opts.wind_direction > wind_max) {wind_direction = wind_max;} else if (opts.wind_direction < wind_min) {wind_direction = wind_min;} else {wind_direction = opts.wind_direction || 270;}maxNum = opts.maxNum || 1000;numLevel = opts.numLevel || 10;drop_chance = opts.drop_chance || 0.1; // 涓嬮洦鐨勬鐜�gravity = opts.gravity || 0.163; // 閲嶅姏//璁剧疆鏍峰紡setStyle();update();if (opts.cloud) {image = new Image()image.onload = initimage.src = 'https://luckyclover.top/static/cloud.png'}
}function setStyle() {ctx.lineWidth = 1.5 * DPR;ctx.fillStyle = "rgba(223,223,223,0.6)";
}function update() {//娓呯悊鐢诲浘ctx.clearRect(0, 0, canvas.width, canvas.height);var i = drops.length;while (i--) {var drop = drops[i];drop.update();//濡傛灉drop瀹炰緥涓嬮檷鍒板簳閮紝鍒欓渶瑕佸湪drops鏁扮粍涓竻闄よ瀹炰緥瀵硅薄if (drop.pos.y >= canvas.height) {//濡傛灉闇€瑕佸洖寮癸紝鍒欏湪bouncess鏁扮粍涓姞鍏ounce瀹炰緥if (hasBounce) {var n = Math.round(4 + Math.random() * 4);while (n--) bounces.push(new Bounce(drop.pos.x, canvas.height));}//濡傛灉drop瀹炰緥涓嬮檷鍒板簳閮紝鍒欓渶瑕佸湪drops鏁扮粍涓竻妤氳瀹炰緥瀵硅薄drops.splice(i, 1);}drop.draw();}//濡傛灉闇€瑕佸洖寮�if (hasBounce) {var i = bounces.length;while (i--) {var bounce = bounces[i];bounce.update();bounce.draw();if (bounce.pos.y > canvas.height) bounces.splice(i, 1);}}//姣忔浜х敓鐨勬暟閲�let a = angle[0] + myAngle.get() * (angle[1] - angle[0]) / 100let s = speed[0] + mySpeed.get() * (speed[1] - speed[0]) / 100if (drops.length < maxNum) {if (Math.random() < drop_chance) {var i = 0,len = numLevel;for (; i < len; i++) {drops.push(new Drop(a, s));}}}//鐩戝惉绐楀彛澶у皬鏀瑰彉window.addEventListener("resize", onWindowResize, false);//涓嶆柇寰幆updaterequestAnimFrame(update);
}function onWindowResize() {canvas.style.width = window.innerWidth + "px";canvas.style.height = window.innerHeight + "px";canvas.width = canvas.clientWidth * DPR;canvas.height = canvas.clientHeight * DPR;setStyle();
}var Vector = function(x, y) {this.x = x || 0;this.y = y || 0;
};//涓嬭惤鍔犻€�
Vector.prototype.add = function(v) {if (v.x != null && v.y != null) {this.x += v.x;this.y += v.y;} else {this.x += v;this.y += v;}return this;
};Vector.prototype.copy = function() {return new Vector(this.x, this.y);
};var Drop = function(a, s) {//璁＄畻闆ㄦ淮璺濈杈圭紭鐨勪綅缃�// var edge = Math.tan((270 - wind_direction) * eachAnger) * canvas.height;wind_direction = a;var edge = Math.tan((270 - wind_direction) * eachAnger) * canvas.height;//璁＄畻闆ㄦ淮鍧愭爣if (edge >= 0) {this.pos = new Vector(Math.random() * (canvas.width + edge), 0);} else {this.pos = new Vector(Math.random() * (canvas.width - edge) + edge, 0);}//鐢熸垚涓€涓殢鏈洪閫�this.speed = (s) * DPR;this.prev = this.pos;//鑾峰緱椋庡悜鐨勮搴�wind_anger = wind_direction * eachAnger;//鑾峰緱妯悜鍔犻€熷害speed_x = this.speed * Math.cos(wind_anger);windX = speed_x//鑾峰緱绾靛悜鍔犻€熷害speed_y = -this.speed * Math.sin(wind_anger);//缁戝畾涓€涓€熷害瀹炰緥this.vel = new Vector(speed_x, speed_y);
};//鍏湁鏂规硶-update
Drop.prototype.update = function() {this.prev = this.pos.copy();//濡傛灉鏄湁閲嶅姏鐨勬儏鍐碉紝鍒欑旱鍚戦€熷害杩涜澧炲姞if (gravity) {this.vel.y += gravity;}this.pos.add(this.vel);this.setStyle();
};Drop.prototype.setStyle = function() {var color = ctx.createLinearGradient(this.prev.x,this.prev.y,this.pos.x,this.pos.y);color.addColorStop(0, "rgba(0,0,0,0");color.addColorStop(0.5, "rgba(223,223,223,0.6)");ctx.strokeStyle = color;
};Drop.prototype.draw = function() {ctx.beginPath();ctx.moveTo(this.prev.x, this.prev.y);ctx.lineTo(this.pos.x, this.pos.y);ctx.stroke();
};var Bounce = function(x, y) {var dist = Math.random() * 7;var angle = Math.PI + Math.random() * Math.PI;this.pos = new Vector(x, y);this.radius = 0.2 + Math.random() * 0.8;this.vel = new Vector(Math.cos(angle) * dist, Math.sin(angle) * dist);
};Bounce.prototype.update = function() {this.vel.y += gravity;this.vel.x *= 0.95;this.vel.y *= 0.95;this.pos.add(this.vel);
};Bounce.prototype.draw = function() {ctx.beginPath();ctx.arc(this.pos.x, this.pos.y, this.radius * DPR, 0, Math.PI * 2);ctx.fill();
};var getBetween = function(s) {this.s = s;this.value = 50;
};getBetween.prototype.get = function() {let d = 1 + Math.random() * -2;d *= this.s;this.value += d;if (this.value > 100 || this.value < 0) {this.value -= 1.1 * d;}return this.value;
};// wind
let pre = 0
class Cloud {constructor(props) {this.x = 0this.y = 0this.xpos = 0this.ypos = 0this.zpos = 0this.scaleX = 1this.scaleY = 1this.visible = trueObject.assign(this, props)}draw(ctx) {ctx.save()ctx.translate(this.x, this.y)ctx.scale(this.scaleX, this.scaleY)ctx.drawImage(this.image, 0, 0, 256, 120)ctx.restore()}
}function init() {canvas2 = document.createElement("canvas");document.body.appendChild(canvas2);canvas2.style.position = "absolute";canvas2.style.top = 0;canvas2.style.left = 0;// canvas2.style.zIndex = 1;canvas2.style.pointerEvents = "None";canvas2.style.width = window.innerWidth + "px";canvas2.style.height = 135 + "px";const width = canvas2.width = canvas2.clientWidth * DPR;const height = canvas2.height = canvas2.clientHeight * DPR;const ctx = canvas2.getContext('2d')const clouds = createCloud(24)// 瑙傚療鐐硅窛绂伙紙闀滃ご鐒﹁窛锛�const fl = 1000function createCloud(nums) {const clouds = []while (nums--) {clouds.push(new Cloud({image,xpos: Math.random() * width * 2 - width,ypos: Math.random() * height - 2 * height / 3,zpos: Math.random() * 400 - 200}))}return clouds}function translateX(cloud) {let x1 = cloud.xpos + windX * 0.02if (x1 > width)x1 = - widthelse if (x1 < - width)x1 = widthcloud.xpos = x1}function setPerspective(cloud) {// 闃叉姣斾緥鍑洪敊瑕佸仛涓€涓垽鏂�if (cloud.zpos > -fl) {const scale = fl / (fl + cloud.zpos) // 浜х敓 0锝�1 涔嬮棿鐨勪竴涓€硷紝鐢ㄦ潵鍋氱缉鏀惧拰闈犺繎娑堝け鐐圭殑涓€涓瘮渚�cloud.scaleX = cloud.scaleY = scalecloud.x = width / 2 + cloud.xpos * scalecloud.y = cloud.ypos * scalecloud.visible = true} else {cloud.visible = false}}function move(cloud) {translateX(cloud)setPerspective(cloud)}function zsort(a, b) {return b.zpos - a.zpos}function draw(cloud) {if (cloud.visible && cloud.x < width) {cloud.draw(ctx)}}(function drawFrame() {window.requestAnimationFrame(drawFrame)ctx.clearRect(0, 0, width, height)clouds.sort(zsort)clouds.forEach(move)clouds.forEach(draw)})()
}

!需要把两个包放在一个Directory里,html里script src的路径要与js一致方才有效果

JavaScript下雨效果相关推荐

基于JavaScript+css写一个简单的h5动态下雨效果
基于JavaScript+css写一个简单的h5动态下雨效果文章目录什么是前端展示效果 JavaScript是什么? 步骤 1.html 2.css 3.js 什么是前端前端它是一个工作,它的 ...
html背景只向x轴扩散,有趣的css—简单的下雨效果2.0版
有趣的css-简单的下雨效果2.0版推荐原创 Fatman_2021-05-18 13:37:36©著作权文章标签 css 阅读数 1119 ©著作权归作者所有:来自51CTO博客作者Fatma ...
Javascript动画效果（四）
Javascript动画效果(四) 前面我们自己写了一个小小的关于js动画的插件,下面我们来使用之前的框架来完成我们想要的动画效果.我们经常在淘宝网中看到,鼠标经过某一图片时,该图片有从上滚出而又从下 ...
Unity3d中使用自带动画系统制作下雨效果(一)
之前看了以前版本的unity3d demo AngryBots ,觉得里面的下雨效果不错,刚好前段时间学习了,写出来跟大家分享下,直接开始. 使用自带动画系统制作下雨效果. 先制作下雨的雨滴涟漪. 步 ...
canvas实现漂亮的下雨效果
说明这篇文章说如何用canvas画出漂亮的下雨效果,先看看最后实现的效果吧. 效果图解释看图来分析下,我们需要实现哪些效果. 1.雨滴下落效果,移动鼠标控制下落方向 2.雨滴下落散成小水珠,小水 ...
6 cocos2dx粒子效果，类图关系，系统原生粒子和自定义粒子效果，粒子编译器软件，爆炸粒子效果，烟花效果，火焰效果，流星效果，漩涡粒子效果，雪花效果，烟雾效果，太阳效果，下雨效果
1 粒子示例 2 类图关系 3 系统原生粒子 CCParticleSystem 所有粒子系统的父类 CCParticleSystemPoint. CCParticleSystemQuad 点粒 ...
html怎么做下雨效果,Canvas制作的下雨动画的示例
简介在codepen上看到一个Canvas做的下雨效果动画,感觉蛮有意思的.就研究了下,这里来分享下,实现技巧. 效果截图: Canvas动画基础大家都知道,Canvas其实只是一个画板.我们可以 ...
【Android效果集】下雨效果
本文参考学习视频教程-<Android 粒子效果之雨> 效果图: 本文在<[Android效果集]弹幕效果 >基础上实现,建议先阅读完再看本文. 跟着上一篇介绍弹幕效果的文章 ...
php下雨效果源码,ps下雨效果制作步骤
ps下雨效果制作步骤:首先打开ps软件,并导入一张图片素材:然后新建一个透明图层,并选择填充工具,将填充图层为白色:接着点击菜单栏的滤镜选项,并在弹出的列表选择像素化:最后在点状化的设置窗口中调整参数 ...

JavaScript下雨效果

以下是HTML代码:

以下是JS代码,需要保存在javascript file包中:

!需要把两个包放在一个Directory里,html里script src的路径要与js一致方才有效果

JavaScript下雨效果相关推荐

最新文章

热门文章