html 代码
- <!DOCTYPE html>
- <!-- saved from url=(0065)http://www.17sucai.com/preview/537573/2016-08-18/star1/index.html
- -->
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>
一起来看流星雨
- </title>
- <script>
- var context;
- var arr = new Array();
- var starCount = 800;
- var rains = new Array();
- var rainCount = 20;
- // 初始化画布及 context
- function init() {
- // 获取 canvas
- var stars = document.getElementById("stars");
- windowWidth = window.innerWidth; // 当前的窗口的高度
- stars.width = windowWidth;
- stars.height = window.innerHeight;
- // 获取 context
- 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--1200
- this.x = Math.random() * window.innerWidth; // 窗口高度
- // 纵坐标小于 600
- this.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" width="1920" height="847">
- </canvas>
- </body>
- </html>
来源: http://www.qdfuns.com/article/42088/66463a5fcb9628877379fd813009ca06.html