<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, 0, 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>
<body onload= "init ()" >
<div><a href= "http://www.999jiujiu.com/" >http://www.999jiujiu.com/</A></div>
</body>
HTML5 Fantasy Starry Sky, can be used as Web background
