【无标题】star rain
<!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 rainCount = 20;function init() {var stars = document.getElementById("stars");windowWidth = window.innerWidth; //当前的窗口的高度stars.width = windowWidth;stars.height = window.innerHeight;context = stars.getContext("2d");}//创建一个星星对象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);}}//画月亮function drawMoon() {var moon = new Image();moon.src = "./images/moon.jpg"context.drawImage(moon, -5, -10);}//页面加载的时候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.countPos = function ()//{
//往左下移动,x减少,y增加this.x = this.x - this.offset_x;this.y = this.y + this.offset_y;}/*****************获取随机坐标的函数*****************/this.getPos = function () //{
//横坐标200--1200this.x = Math.random() * window.innerWidth; //窗口高度
//纵坐标小于600this.y = Math.random() * window.innerHeight; //窗口宽度}/****绘制流星***************************/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();}}//绘制流星function playRains() {for (var n = 0; n < rainCount; n++) {var rain = rains[n];rain.move();//移动if (rain.y > window.innerHeight) {//超出界限后重来context.clearRect(rain.x, rain.y - rain.height, rain.width, rain.height);rains[n] = new MeteorRain();rains[n].init();}}setTimeout("playRains()", 2);}/*流星雨结束*/</script><style type="text/css">body {background-color: black;}body, html {width: 100%;height: 100%;overflow: hidden;}</style>
</head>
<body>
<canvas id="stars"></canvas>
</body>
</html>
【无标题】star rain相关推荐
- 关于WM_NCHITTEST消息(移动无标题对话框多个)
我为了移动一个无标题栏的窗体,使用了WM_NCHITTEST消息,这个消息大概如下: 通常,我们拖动对话框窗口的标题栏来移动窗口,但有时候,我们想通过鼠标在客户区上拖动来移动窗口. 一个容易想到的方案 ...
- mysql输入命令1002无标题_Linux下远程连接MySQL数据库的方法
步骤 1.在服务器端开启远程访问 首先进入mysql数据库,然后输入下面两个命令: grant all privileges on *.* to 'root'@'%' identified by 'p ...
- C# 系统应用之无标题窗体移动的两种方法
在做项目界面设计中,常常为了美观需要设置窗体属性"FormBorderStyle"(窗体边框和标题栏外观)为None无标题窗口.此时隐藏标题的窗口怎样实现移动呢?我根据自己的项目从 ...
- Android 置Activity全屏和无标题
今天,实在没有什么好些写的内容,所以在网上找了很久,才决定写这个博客.比较简单,还是想保持写博客的习惯. 一.在代码里设置全屏. Activity设置全屏和无标题栏,要用到andorid.view.W ...
- ActionBarActivity设置全屏无标题
新建的Activity继承自ActionBarActivity,设置全屏无标题本来非常easy的事,可是没想到app居然无缘无故的挂,要么就是白屏一片,要么就是黑屏.坑了我一个多小时.!! 原因是Ac ...
- android教程1009无标题,Android ActionBarActivity设置全屏无标题实现方法总结_Android_脚本之家...
Android ActionBarActivity设置全屏无标题实现方法总结 前言: 新建的Activity继承自ActionBarActivity,设置全屏无标题本来很简单的事,但是没想到app竟 ...
- MFC修改窗口无标题和标题信息,修改执执行文件图标
一.创建MFC后 窗口显示的是 无标题-工程名 修改方法在网上看到了几种,下面介绍下比较简单的一种: 1.在MianFrame.c文件中找到这个函数 BOOL CMainFrame::PreCreat ...
- Visual Studio Code中的无标题(工作区)
点击文件--将工作区另存为--重新将工作区重命名 即可 我进行更改的时候,发现我之前无标题(工作区)里的文件都消失了,还好发现只是软件里消失.电脑磁盘里保存还有这些文件,之后 打开软件--点击文件-- ...
- html是什么1003无标题,爱特漫画1003无标题
爱特漫画1003无标题有着非常不错的便利性功能能够让用户们轻松的享受到自己需要的漫画阅读体验.各种功能都是为了服务漫友而打造的喜欢漫画的话就快下载吧. 爱特漫画1003无标题特色: 1.主页有一个特殊 ...
- Android 无标题 全屏设置
Android 无标题 全屏设置 标题栏和状态栏 Android程序默认情况下是包含状态栏和标题栏的. 在Eclipse中新建一个Android程序,运行后显示如下: 图中标出了状态栏(显示时间.电池 ...
最新文章
- 组件通信 $ref
- leetcode讲解--559. Maximum Depth of N-ary Tree
- JSON.parse()解析单引号错误的问题
- ARP协议具体解释之Gratuitous ARP(免费ARP)
- python获取当前时间的源代码_python怎么获取当前系统时间
- UML建模:学习笔记(1)
- 如何虚拟打印PDF文件(Win7)
- 信息论 基础知识(一)
- android 输入模糊匹配_Android 模糊搜索
- Python 手写体识别
- 复旦大学陈平博士:网络攻击猖獗,如何应对数据安全与内生安全挑战?
- 关于vs2013弹出“正在初始化模板“的问题
- redis 应用场景
- 模仿探探(百合网,珍爱网)卡片左右滑动效果,滑动流畅,卡片view无限重生
- 国产cms java_国产java类cms v3.0.161109
- 微风:UI设计需要学习哪些软件?
- js网页繁体简体转换(备忘)
- 【UML】— 用例图
- 计算机科学引论试题,内工大计算机科学引论在线测试题.pdf
- 智能车图像部分——摄像头寻迹