See a great meteor shower effect. Change the style to serve as the background of the web page. . !
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Let's see the meteor shower together</title>
<script>
var context;
var arr = new Array();
var starCount = 800;
var rains = new Array();
var rainCount =20;
//Initialize the canvas and context function init(){
//Get canvas var stars = ("stars");
windowWidth = ; //The current window height =windowWidth;
=;
//Get context context = ("2d");
}
//Create a star object var Star = function (){
= windowWidth * ();//Horizontal mark = 5000 * ();//Directional coordinate =".";//text = "white";//color //Generate random colors =function(){
var _r = ();
if(_r<0.5){
= "#333";
}else{
= "white";
}
}
//initialization =function(){
();
}
//draw =function(){
=;
(,,);
}
}
//Draw the moon function drawMoon(){
var moon = new Image();
= "./images/"
(moon,-5,-10);
}
//When the page loads = function() {
init();
//Draw stars for (var i=0;i<starCount;i++) {
var star = new Star();
();
();
(star);
}
//Draw a meteor for (var i=0;i<rainCount;i++) {
var rain = new MeteorRain();
();
();
(rain);
}
drawMoon();//Draw the moon playStars();//Draw the flashing stars playRains();//Draw the shooting star
}
//The stars flash function playStars(){
for (var n = 0; n < starCount; n++){
arr[n].getColor();
arr[n].draw();
}
setTimeout("playStars()",100);
}
/*Meteor shower begins*/
var MeteorRain = function(){
= -1;
= -1;
= -1;//length = 30; //Top angle = -1;//width = -1;//high = 1;//speed this.offset_x = -1;//Horizontal axis movement offset this.offset_y = -1;//Derminal axis movement offset = 1; //transparency this.color1 = "";//The color of the shooting star this.color2 = ""; //The color of the shooting star /*************** Initialization function*********************/
= function () //initialization {
();
= 1;//transparency ();
//Minimum length, maximum length var x = () * 80 + 150;
= (x);
// x = ()*10+30;
= 30; //Meteor tilt angle x = ()+0.5;
= (x); //The speed of the meteor var cos = (*3.14/180);
var sin = (*3.14/180) ;
= *cos ; //The width occupied by the meteor = *sin ;//The height occupied by the meteor this.offset_x = *cos ;
this.offset_y = *sin;
}
/***************Get random color function*********************/
= function (){
var a = (255-240* ());
//Middle color this.color1 = "rgba("+a+","+a+","+a+",1)";
//End Color this.color2 = "black";
}
/*************** Function to recalculate the coordinates of the shooting star*******************/
= function ()//
{
//Move to the lower left, x decreases, y increases = - this.offset_x;
= + this.offset_y;
}
/*************** Function to get random coordinates************************/
= function () //
{
//The horizontal coordinate 200--1200 = () * ; //Window height //The vertical coordinate is less than 600 = () * ; //Window width }
/***Draw the meteor**********************/
= function () //Draw a function of a shooting star {
();
();
= 1; //width = ; //Set transparency //Create horizontal gradient color, start point coordinate to end point coordinate var line = (, ,
+ ,
- );
//Set color in segments (0, "white");
(0.3, this.color1);
(0.6, this.color2);
= line;
//starting point (, );
//end ( + , - );
();
();
();
}
= function(){
//Clear the meteor pixel var x = +-this.offset_x;
var y = ;
(x-3,y-3,this.offset_x+5,this.offset_y+5);
// ="red";
// (x,y-1,this.offset_x+1,this.offset_y+1);
//Recalculate the position and move to the lower left ();
//Add transparency -= 0.002;
//Repaint ();
}
}
//Draw the shooting starfunction playRains(){
for (var n = 0; n < rainCount; n++){
var rain = rains[n];
();//move if(>){//Come again after exceeding the boundary (,,,);
rains[n] = new MeteorRain();
rains[n].init();
}
}
setTimeout("playRains()",2);
}
/*Meteor shower ends*/
</script>
<style type="text/css">
body{
background-color: black;
}
body,html{width:100%;height:100%;overflow:hidden;}
</style>
</head>
<body>
<canvas ></canvas>
</body>
</html>
The above is all the content of this article. I hope that the content of this article will help you study or work. I also hope to support me more!