看到一個很棒的流星雨效果。修改一下樣式就可以作為網頁背景了。。！
<!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; //初始化畫布及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"></canvas> </body></html>以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
