1、了解canvas
这是画布2、设置body背景色
body{
background-color:black;
}
3、初始化画布及context
context作为全局变量
varcontext;
functioninit(){
//获取canvas
varstars=document.getElementById("stars");
windowWidth=window.innerWidth;
stars.width=windowWidth;
//获取context
context=stars.getContext("2d");
}
4、定义星星对象
//星星对象
varStar=function(){
this.x=-1;//横坐标
this.y=-1;//纵坐标
this.text="*";//文本
this.font="italicbold24pxserif";
this.color="white";//颜色
//产生坐标
this.getPos=function(){
varxx=windowWidth*Math.random();//不要超出边界
varyy=600*Math.random();//不要超出边界
this.x=Math.floor(xx);
this.y=Math.floor(yy);
}
//产生随机颜色，四种不同亮度的星星
this.getColor=function(){
var_r=Math.random();
if(_r<0.2){
this.color="#0000FF";
}elseif(_r<0.5){
this.color="white";
}elseif(_r<0.8){
this.color="#989898";
}else{
this.color="#B8B8B8";
}
}
//产生随机fontSize，最大是15个像素，最小3个像素
this.getFont=function(){
var_r=Math.random()*12+3;
this.font="italicbold"+Math.ceil(_r)+"pxserif";
}
//初始化
this.init=function(){
this.getPos();
this.getColor();
this.getFont();
}
//绘制
this.draw=function(){
context.fillStyle=this.color;
context.font=this.font;
context.fillText(this.text,this.x,this.y);
}
}
5、画月亮
//画月亮
functiondrawMoon(){
var moon = new Image();
moon.src = "../img/moon.png"
context.drawImage(moon,10,10);
}
6、在onload事件中绘制星星及月亮
vararr=newArray();
varstarCount=1000;
window.onload=function(){
init();
//画星星
for(vari=0;i
varstar=newStar();
star.init();
star.draw();
arr.push(star);
}
drawMoon();
}
之所以要用数组，是因为等下我们要让星星闪起来
7、星星闪起来
//星星闪起来
functionplayStars(){
for(varn=0;n
arr[n].getColor();//重新获取颜色
arr[n].draw();//重新绘制
}
setTimeout("playStars()",500);//半秒钟闪一次
}
在onload事件的回调函数最后一行加入调playStars的代码
效果：
全部代码：
html>
满天繁星
vararr=newArray();
varstarCount=1000;
varcontext;
//初始化画布及context
functioninit(){
//获取canvas
varstars=document.getElementById("stars");
windowWidth=window.innerWidth;
stars.width=windowWidth;
//获取context
context=stars.getContext("2d");
}
//星星对象
varStar=function(){
this.x=-1;//横坐标
this.y=-1;//纵坐标
this.text="*";//文本
this.font="italicbold24pxserif";
this.color="white";//颜色
//产生坐标
this.getPos=function(){
varxx=windowWidth*Math.random();
varyy=600*Math.random();
this.x=Math.floor(xx);
this.y=Math.floor(yy);
}
//产生随机颜色
this.getColor=function(){
var_r=Math.random();
if(_r<0.2){
this.color="#0000FF";
}elseif(_r<0.5){
this.color="white";
}elseif(_r<0.8){
this.color="#989898";
}else{
this.color="#B8B8B8";
}
}
//产生随机fontSize
this.getFont=function(){
var_r=Math.random()*12+3;
this.font="italicbold"+Math.ceil(_r)+"pxserif";
}
//初始化
this.init=function(){
this.getPos();
this.getColor();
this.getFont();
}
//绘制
this.draw=function(){
context.fillStyle=this.color;
context.font=this.font;
context.fillText(this.text,this.x,this.y);
}
}
window.onload=function(){
init();
//画星星
for(vari=0;i
varstar=newStar();
star.init();
star.draw();
arr.push(star);
}
drawMoon();
playStars();
}
//画月亮
functiondrawMoon(){
var moon = new Image();
moon.src = "../img/moon.png"
context.drawImage(moon,10,10);
}
//星星闪起来
functionplayStars(){
for(varn=0;n
arr[n].getColor();
arr[n].draw();
}
setTimeout("playStars()",500);
}
body{
background-color:black;
}
原创，转载请注明出处
