JavaScript实现流星雨效果的示例代码
目录
- 演示
- 技术栈
- 源码
- 首先建立星星对象
- 让星星闪亮起来
- 创建流星雨对象
- 让流星动起来
演示
上一次做了一个雨滴的动画，顺着这种思维正好可以改成流星雨，嘿嘿我真是一个小机灵。
技术栈
还是先建立画布
<body>
<canvas id="stars"></canvas>
</body>
画布标签我昨天讲过了。不知道的小伙伴可以去看看。
源码
首先建立星星对象
//创建一个星星对象
var Star = function (){
this.x = windowWidth * Math.random();//横坐标
this.y = 5000 * Math.random();//纵坐标
this.text=".";//文本
this.color = "white";//颜色
//产生随机颜色
this.getColor=function(){
var _r = Math.random();
if(_r<0.5){
this.color = "#333";
}else{
this.color = "white";
}
}
//初始化
this.init=function(){
this.getColor();
}
//绘制
this.draw=function(){
context.fillStyle=this.color;
context.fillText(this.text,this.x,this.y);
}
}
让星星闪亮起来
//页面加载的时候
window.onload = 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);
}
drawMoon();//绘制月亮
playStars();//绘制闪动的星星
playRains();//绘制流星
}
//星星闪起来
function playStars(){
for (var n = 0; n < starCount; n++){
arr[n].getColor();
arr[n].draw();
}
setTimeout("playStars()",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 = ""; //流星的色彩
/****************初始化函数********************/
this.init = function () //初始化
{
this.getPos();
this.alpha = 1;//透明度
this.getRandomColor();
//最小长度，最大长度
var x = Math.random() * 80 + 150;
this.length = Math.ceil(x);
// x = Math.random()*10+30;
this.angle = 30; //流星倾斜角
x = Math.random()+0.5;
this.speed = Math.ceil(x); //流星的速度
var cos = Math.cos(this.angle*3.14/180);
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.getRandomColor = function (){
var a = Math.ceil(255-240* Math.random());
//中段颜色
this.color1 = "rgba("+a+","+a+","+a+",1)";
//结束颜色
this.color2 = "black";
}
让流星动起来
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);
//分段设置颜色
line.addColorStop(0, "white");
line.addColorStop(0.3, this.color1);
line.addColorStop(0.6, this.color2);
context.strokeStyle = line;
//起点
context.moveTo(this.x, this.y);
//终点
context.lineTo(this.x + this.width, this.y - this.height);
context.closePath();
context.stroke();
context.restore();
}
this.move = function(){
//清空流星像素
var x = this.x+this.width-this.offset_x;
var y = this.y-this.height;
context.clearRect(x-3,y-3,this.offset_x+5,this.offset_y+5);
// context.strokeStyle="red";
// context.strokeRect(x,y-1,this.offset_x+1,this.offset_y+1);
//重新计算位置，往左下移动
this.countPos();
//透明度增加
this.alpha -= 0.002;
//重绘
this.draw();
}
}
以上就是JavaScript实现流星雨效果的示例代码的详细内容，更多关于JavaScript流星雨的资料请关注我们其它相关文章！
相关推荐
-
JavaScript canvas实现雨滴特效
本文实例为大家分享了canvas实现雨滴特效的具体代码,供大家参考,具体内容如下 一.雨滴特效需求 雨滴从窗口顶部随机下落到达底部将呈现波纹逐渐散开变淡直到消失,雨滴特效随窗口变化自适应 二.雨滴实现思路 1. 用面向对象的思维 首先创建canvas画布 ,绘制一个雨滴的初始化形状 2. 在给雨滴添加运动的方法 3. 通过定时器让雨滴运动起来 三.具体分析 1.雨滴初始化需要的属性有哪些? 坐标x,y 宽高w,h . 2.雨滴下落是逐渐加速下落不是匀速需要给一个加速度的属性,也就是y轴坐标不断加
-
基于JavaScript实现动态雨滴特效
目录 演示 技术栈 源码 设置画布 js部分 演示 技术栈 介绍一下画布吧: HTML5 标签用于绘制图像(通过脚本,通常是 JavaScript). 不过, 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用脚本来完成实际的绘图任务. getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性 它的方法挺多的大家可以去搜一下我就说几个常用的: 源码 设置画布 <canvas id="canvas" style="position:
-
javascript实现下雨效果
效果图: 代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>梦柯教育-锤子老师</title> <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;color:#fff;} body { o
-
基于JS实现漫画中大雨滂沱的效果
目录 演示 技术栈 源码 css部分 大雨滂沱 演示 技术栈 最近用canvas有点上瘾,接着上次的雨滴和流星雨的思路我们在改进一下 <canvas id='canvas' width='1280' height='720'></canvas> 源码 css部分 body { margin:0; padding:0; background: #000; overflow:hidden; } canvas { background:url('../img/maxresdefault.
-
javascript canvas实现雨滴效果
本文实例为大家分享了javascript canvas实现雨滴效果的具体代码,供大家参考,具体内容如下 先看效果 看起来很炫酷,其实就是实现了雨滴的掉落还有最后的圆 还是看源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devi
-
javascript制作网页图片上实现下雨效果
这里主要是应用了一个rainyday的js类库,使用非常简单方便,就不多废话了,看演示代码吧. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type&qu
-
canvas实现流星雨的背景效果
看到一个很棒的流星雨效果.修改一下样式就可以作为网页背景了..! <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>一起来看流星雨</title> <script> var context; var arr = new Array(); var starCount = 800; var rains = new Array(); var
-
JavaScript实现流星雨效果的示例代码
目录 演示 技术栈 源码 首先建立星星对象 让星星闪亮起来 创建流星雨对象 让流星动起来 演示 上一次做了一个雨滴的动画,顺着这种思维正好可以改成流星雨,嘿嘿我真是一个小机灵. 技术栈 还是先建立画布 <body> <canvas id="stars"></canvas> </body> 画布标签我昨天讲过了.不知道的小伙伴可以去看看. 源码 首先建立星星对象 //创建一个星星对象 var Star = function (){ this
-
使用JavaScript 实现时间轴与动画效果的示例代码(前端组件化)
目录 代码整理 JavaScript 中的 "帧" 实现"帧"的方法 1. setInterval 2. setTimeout 3. requestAnimationFrame 实现 Timeline 时间轴 实现 start 函数 实现 Animation 类 设计时间线的更新 添加 Delay 属性支持 实现暂停和重启功能 实现 Pause 实现 Resume 上一篇文章<用 JSX 实现 Carousel 轮播组件>中,我们实现了一个 "
-
JavaScript实现外溢动态爱心的效果的示例代码
还在为节日送女朋友什么礼物而烦恼吗?最近用JavaScript制作了一个外溢动态爱心的效果,还可以在爱心上填写你想要的文字!快学习一下给自己女朋友也diy一个吧 效果演示 源码介绍 ( function() { var b=0; var c=["ms","moz","webkit","o"]; for(var a=0;a<c.length&&!window.requestAnimationFrame;++
-
JavaScript实现扯网动画效果的示例代码
目录 演示 技术栈 源码 css控制 js部分 演示 技术栈 JavaScript prototype(原型对象): 所有的 JavaScript 对象都会从一个 prototype(原型对象)中继承属性和方法.Date 对象从 Date.prototype 继承. Array 对象从 Array.prototype 继承. Person 对象从 Person.prototype 继承. 所有 JavaScript 中的对象都是位于原型链顶端的 Object 的实例. JavaScript 对象
-
【JS+CSS3】实现带预览图幻灯片效果的示例代码
一.前期准备 1.1 案例分析 适用场景:单例布局 1.2 方法论 V视图 HTML+CSS+调试 C js实现控制流程 D数据 优化扩展 二.代码 结构 <div class="slider"><!-- 特效区 --> <div class="main"><!-- 主视图区 --> <div class="main_i"> <div class="caption&quo
-
Vue 实现展开折叠效果的示例代码
本文介绍了Vue 实现展开折叠效果的示例代码,分享给大家,具体如下: 效果如见: 1.html代码 <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js文本段落展开和收拢效果</title> <script type="text/javasc
-
JavaScript实现跟随广告的示例代码
浮动广告是目前网站很常见的一种广告形式,浮动广告能实时跟随用户的浏览,有效的传达产品要表达的意思,达到很好的传播效果.那么浮动广告是怎么实现的呢,其实实现浮动广告并不难,具体如下: * { margin: 0; padding: 0; } img { position: absolute; left: 0; } p { text-align: center; line-height: 40px; } <img src="images/left_ad.png" alt="
-
JavaScript 实现下雪特效的示例代码
直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下雪效果实现</title> <link rel="stylesheet" type="text/css" href="reset.css"> <style type=
-
原生JavaScript实现模态框的示例代码
目录 原生js封装模态框 示例效果 代码 原生js封装模态框 最近需要一个模态框,然后一种是提示类的,一种是确认类型,我就想着再网上找一个然后修改一下,结果找到了,但是不深特别合适,我再次基础上在做了修改,对功能有所增强,纯原生写的,没有任何依赖性,适应性比较强,值copy即可使用. 配置:可以在实例化时对options进行参数设置,达到自己想要的效果 示例效果 代码 HTML部分 <head> <meta charset="utf-8"> <title&
-
JavaScript中removeChild 方法开发示例代码
1. 概述 删除后的节点虽然不在文档树中了,但其实它还在内存中,可以随时再次被添加到别的位置. 当你遍历一个父节点的子节点并进行删除操作时,要注意,children属性是一个只读属性,并且它在子节点变化时会实时更新 // 拿到待删除节点: var self = document.getElementById('to-be-removed'); // 拿到父节点: var parent = self.parentElement; // 删除: var removed = parent.remove