Home > Developer > Web Develop
HTML5 dream star, available as webpage background, html5 webpage background
<Html>
<Head>
<Title> stars </title>
<META http-equiv = "X-UA-Compatible" content = "IE = edge"> </META>
<META http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Script>
Var BW = 800; // canvas width
Var BH = 600; // canvas height
Var MAX_STAR_SIZE = 3;
Var MAX_STAR_SPEED = 1;
Var STAR_COUNT = 120;
Var BGCOLOR = "black ";
Var ctx;
Var stars = [];
Function rndf (n ){
Return Math. floor (Math. random () * n );
}
Function rndc (n ){
Return Math. ceil (Math. random () * n );
}
Function Star (){
This. reset = function (){
This. x = 0;
This. y = rndf (BH );
This. size = rndc (MAX_STAR_SIZE );
This. vx = MAX_STAR_SPEED * this. size/MAX_STAR_SIZE;
This. vy = 0;
This. color = "rgba (" + rndf (255) + "," + rndf (255) + "," + rndf (255) + ", 0.5 )";
};
This. reset ();
This. x = rndf (BW );
}
Function render (){
Ctx. globalCompositeOperation = "source-over ";
Ctx. fillStyle = "rgba (0, 0, zero, 0.3 )";
Ctx. fillRect (0, 0, BW, BH );
Ctx. globalCompositeOperation = "lighter ";
For (var I = 0; I <STAR_COUNT; ++ I ){
Var p = stars [I];
Ctx. beginPath ();
Var gradient = ctx. createRadialGradient (p. x, p. y, 0, p. x, p. y, p. size );
Gradient. addColorStop (0, "white ");
Gradient. addColorStop (0.4, "white ");
Gradient. addColorStop (0.4, p. color );
Gradient. addColorStop (1, "black ");
Ctx. fillStyle = gradient;
Ctx. arc (p. x, p. y, p. size, Math. PI * 2, false );
Ctx. fill ();
P. x + = p. vx;
P. y + = p. vy;
If (p. x <= 0 | p. x> = BW | p. y <= 0 | p. y> = BH ){
P. reset ();
}
}
}
Function init (){
If (! Window. console ){
Console = {log: function () {}, debug: function (){}};
}
// Create canvas
Var cv = document. createElement ('canvas ');
Cv. width = BW;
Cv. height = BH;
Cv. style. background = BGCOLOR;
Document. body. appendChild (cv );
Ctx = cv. getContext ("2d ");
// Create all stars
For (var I = 0; I <STAR_COUNT; ++ I ){
Var s = new Star ();
Stars. push (s );
}
SetInterval (render, 33 );
};
</Script>
</Head>
<Body onload = "init ()">
<Div> <A href = "http://www.999jiujiu.com/"> http://www.999jiujiu.com/</A> </div>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
