如何用js绘制流星雨特效

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>新年流星雨</title><style>body{background-color: #000000;}body,html{width: 100%;height: 100%;overflow: hidden}h1{  position: absolute;left: 5%;animation: num 30s linear infinite; }@keyframes num {/*动画*/0%{width: 450px;transform: translate(0px,-40px)}25%{width: 450px;transform: translate(1400px,30px)}50%{width:450px;transform: translate(0px,40px)}70%{width: 450px;transform: translate(1400px,-30px)}100%{width:450px;transform: translate(0px,-40px)}}</style>
</head>
<body>
<!--月亮图片-->
<img src="1.jpg"width="16%" height="18%" style="margin-left: 50%">
<h1 style=" color: #05fff7;font-size: 50px;">流星雨许愿贼灵哦！</h1>
<canvas id="stars"></canvas>
</body>
<script>var context;//整个上下文var arr=new Array();//星星数组var starCount=500; //星星开始数量var rains=new Array();//流星雨数组var rainCount=20;//流星雨的数量//初始化画布及contextfunction init(){//获取canvasvar stars=document.getElementById("stars");//获取当前窗口的宽度和高度stars.width=window.innerWidth;//窗口宽度stars.height=window.innerHeight;//窗口高度//获取上下文contextcontext=stars.getContext("2d");//返回画布环境2d画面效果}//创建星星对象var Star=function (){this.x = window.innerWidth * Math.random();//横坐标等于窗口宽度乘以1以内的随机数this.y = 5000 * Math.random();//纵坐标（就是窗口高度为5000乘以1以内随机数）this.text = ".";//星星文本this.color = "white";//星星颜色//产生随机黑白颜色方法this.getColor=function() {var r = Math.random();//获取随机数if (r < 0.5) {this.color = "#000000";//黑色} else {this.color = "white";//白色}}//初始化this.init = function () {this.getColor();//调用随机产生颜色}//绘制this.draw = function () {context.fillStyle = this.color;//填入颜色//text:规定在画布上输出的文本，//x:开始绘制文本的下坐标位置（相对于画布）//y:开始绘制文本y坐标位置（相对于画布）context.fillText(this.text, this.x, this.y);}}//星星闪烁方法function playStars(){//循环遍历星星数组，让每一个小星星闪for(var s=0;s<starCount;s++){arr[s].getColor();//调用产生随机黑白颜色的方法arr[s].draw();//绘制星星}setTimeout("playStars()",100);//定时每100毫秒调用一次}//流星雨var MeteorRain=function(){this.x=-1;this.y=-1;this.length=-1;//长度this.angle=30;//倾斜角度this.width=-1;//宽度this.height=-1;//高度this.speed=1;//速度this.offset_x=-1;//横轴移动偏移量this.offset_y=-1;//纵轴移动偏移量this.alpha=1;//透明度this.color1="";//流星的色彩this.color2="";//流星2的色彩//获取随机坐标的函数this.getPos=function(){this.x=Math.random()*window.innerWidth;//窗口宽度this.y=Math.random()*window.innerHeight;//窗口高度}//获取随机颜色this.getRandomColor=function(){var r=Math.ceil(255-240*Math.random());//Math.ceil()对一个数进行上舍入。//中段颜色this.color1="rgba("+r+","+r+","+r+",1)";//结束颜色this.color2="black";}//初始化函数this.init = function(){this.getPos();//获取随机坐标的函数this.alpha=1;//透明度this.getRandomColor();//获取随机颜色方法//流星雨的最小长度，最大长度var x=Math.random()*80+150;//流星雨的长度this.length=Math.ceil(x);//对随机数进行上舍入this.angle=30;//流星倾斜角x=Math.random()+0.5;this.speed=Math.ceil(x);//流星雨的速度var cos=Math.cos(this.angle*3.14/300);var sin=Math.sin(this.angle*3.14/180);this.width=this.length*cos; //流星所占的宽度this.height=this.length*sin;//流星所占的高度this.offset_x=this.speed*cos;this.offset_y=this.speed*sin;}//绘制流星this.draw=function(){context.save();//保存当前图像状态的一份拷贝。context.beginPath();//重新开始新路径，而把之前的路径都清空掉context.lineWidth=1;//宽度context.globalAlpha=this.alpha;//设置透明度//创建横向渐变颜色，起点坐标至终点坐标var line=context.createLinearGradient(this.x,this.y,this.x+this.width,this.y-this.height);//分段设置颜色渐变//addColorStop方法第一个参数：介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。//addColorStop方法第二个参数：设置颜色line.addColorStop(0,"white");line.addColorStop(0.3,this.color1);line.addColorStop(0.6,this.color2);context.strokeStyle=line;//strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式//起点移动到位置 x,ycontext.moveTo(this.x,this.y);//创建到达位置(this.x+this.width),(this.y-this.height) 的一条线context.lineTo(this.x+this.width,this.y-this.height);//closePath() 方法创建从当前点到开始点的路径。context.closePath();//stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。context.stroke();// restore：用来恢复Canvas之前保存的状态context.restore();}//重新计算流星坐标位置this.countPos=function(){//流星往左下移动，x减少，y增加this.x=this.x-this.offset_x;this.y=this.y+this.offset_y;}this.move=function(){//清空流星像素var x=this.x+this.width-this.offset_x;var y=this.y-this.height;//clearRect() 方法清空给定矩形内的指定像素。context.clearRect(x-3,y-3,this.offset_x+5,this.offset_y+5);//调用流星重新计算位置方法,往左下移动this.countPos();//透明度增加this.alpha-=0.002;//重绘this.draw();}}//绘制流星function playRains(){for(var i=0;i<rainCount;i++){var rain=rains[i];rain.move();//移动if(rain.y>window.innerHeight){//超出界限后重来//clearRect() 方法清空给定矩形内的指定像素。context.clearRect(rain.x,rain.y-rain.height,rain.width,rain.height);rains[i]=new MeteorRain();//创建一个流星对象rains[i].init();//调用流星初始化方法}}setTimeout("playRains()",3);//定时每3毫秒调用一次方法}//页面加载window.function(){init();//调用初始化方法//循环画星星for(var i=0;i<starCount;i++){var star=new Star();//创建一个星星对象star.init();//调用星星初始化方法star.draw();//调用绘制星星方法arr.push(star);//将星星添加到星星数组}//画流星for(var i=0;i<rainCount;i++){var rain=new MeteorRain();//创建一个流星对象rain.init();//调用流星初始化方法rain.draw(); //调用绘制流星方法rains.push(rain);//将流星添加到流星数组}playStars();//调用绘制星星方法playRains();//调用绘制流星的方法}</script></html>

如何用js绘制流星雨特效相关推荐

python画树叶-手把手|如何用Python绘制JS地图？
原标题:手把手|如何用Python绘制JS地图? 关于转载授授权大数据文摘作品,欢迎个人转发朋友圈,自媒体.媒体.机构转载务必申请授权,后台留言"机构名称+文章标题+转载",申请 ...
JS——如何利用js实现流星雨效果？
文章目录前言一.成果图二.实现步骤 1.html结构 2.css样式 3.js行为总结前言一起来看流星雨啊,没有流星雨?那我们就自己画一个,会动的那种哦,还有闪烁的星星哦~ 一.成果图二 ...
【视觉高级篇】20 # 如何用WebGL绘制3D物体？
说明 [跟月影学可视化]学习笔记. 如何用 WebGL 绘制三维立方体我们知道立方体有8个顶点,6个面,在 WebGL 中,需要用 12 个三角形来绘制它.把每个面的顶点分开,需要 24 个顶点. ...
教你如何用Canvas绘制整身的哆啦A梦
教你如何用Canvas绘制整身的哆啦A梦上牌你文章我们说到了如何使用canvas绘制哆啦A梦,但当时只是绘制了哆啦A梦的头部,之后有学员留言说可不可以教大家绘制整身的哆啦A梦,想了想,决定安排一下. ...
如何用 R 绘制交互式社会网络图？
挖掘社会关系网络,助你洞若观火. 需求最近有个学生问我,如何绘制交互式社会网络图(Interactive Social Network Graph)? 之所以一定要交互式,是因为他的应用场景,是演示 ...
如何用 JS 实现 3D 赛车效果
本文将分享如何用 JS 写出一个 3D 赛车,我之前曾在技术交流会上也讲过一次(这里是当时用的 PPT),后来有同学反馈说讲得太深奥没听懂.其实 PPT 里说的更多的是三维图形的基础知识,实现原理体现 ...
【图形基础篇】02 # 指令式绘图系统：如何用Canvas绘制层次关系图？
说明 [跟月影学可视化]学习笔记. 如何用 Canvas 绘制几何图形? 1. Canvas 元素和 2D 上下文 Canvas 元素上的 width 和 height 属性不等同于 Canvas 元 ...
rmd中无法打开链结r_如何用 R 绘制交互式社会网络图？
挖掘社会关系网络,助你洞若观火. 需求最近有个学生问我,如何绘制交互式社会网络图(Interactive Social Network Graph)? 之所以一定要交互式,是因为他的应用场景,是演示 ...
用p5.js制作烟花特效
前言之前看过一篇文章,使用processing制作烟花特效.效果如下网上调查了一圈了,发现processing是一个互动编程软件,java语言发展而来.而且动画效果是跑在processing专门的 ...

如何用js绘制流星雨特效

如何用js绘制流星雨特效相关推荐

最新文章

热门文章