html制作满天星,HTML5练习（1）制作满天星

1、了解canvas

这是画布2、设置body背景色

body{

background-color: black;

}

3、初始化画布及context

context作为全局变量

var context;

function init(){

//获取canvas

var stars = document.getElementById("stars");

windowWidth = window.innerWidth;

stars.width=windowWidth;

//获取context

context = stars.getContext("2d");

}

4、定义星星对象

//星星对象

var Star = function (){

this.x = -1;//横坐标

this.y = -1;//纵坐标

this.text="*";//文本

this.font="italic bold 24px serif";

this.color = "white";//颜色

//产生坐标

this.getPos=function(){

var xx = windowWidth * Math.random(); //不要超出边界

var yy = 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";

}else if(_r<0.5){

this.color = "white";

}else if(_r<0.8){

this.color = "#989898";

}else{

this.color = "#B8B8B8";

}

}

//产生随机fontSize，最大是15个像素，最小3个像素

this.getFont = function(){

var _r = Math.random()*12+3;

this.font = "italic bold "+Math.ceil(_r)+"px serif";

}

//初始化

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、画月亮

//画月亮

function drawMoon(){

var moon = new Image();

moon.src = "../img/moon.png"

context.drawImage(moon,10,10);

}

6、在onload事件中绘制星星及月亮

var arr = new Array();

var starCount = 1000;

window.onload = function() {

init();

//画星星

for (var i=0;i

var star = new Star();

star.init();

star.draw();

arr.push(star);

}

drawMoon();

}

之所以要用数组，是因为等下我们要让星星闪起来

7、星星闪起来

//星星闪起来

function playStars(){

for (var n = 0; n 

arr[n].getColor();  //重新获取颜色

arr[n].draw();      //重新绘制

}

setTimeout("playStars()",500);//半秒钟闪一次

}

在onload事件的回调函数最后一行加入调playStars的代码

效果：

全部代码：

html>

满天繁星

var arr = new Array();

var starCount = 1000;

var context;

//初始化画布及context

function init(){

//获取canvas

var stars = document.getElementById("stars");

windowWidth = window.innerWidth;

stars.width=windowWidth;

//获取context

context = stars.getContext("2d");

}

//星星对象

var Star = function (){

this.x = -1;//横坐标

this.y = -1;//纵坐标

this.text="*";//文本

this.font="italic bold 24px serif";

this.color = "white";//颜色

//产生坐标

this.getPos=function(){

var xx = windowWidth * Math.random();

var yy = 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";

}else if(_r<0.5){

this.color = "white";

}else if(_r<0.8){

this.color = "#989898";

}else{

this.color = "#B8B8B8";

}

}

//产生随机fontSize

this.getFont = function(){

var _r = Math.random()*12+3;

this.font = "italic bold "+Math.ceil(_r)+"px serif";

}

//初始化

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 (var i=0;i

var star = new Star();

star.init();

star.draw();

arr.push(star);

}

drawMoon();

playStars();

}

//画月亮

function drawMoon(){

var moon = new Image();

moon.src = "../img/moon.png"

context.drawImage(moon,10,10);

}

//星星闪起来

function playStars(){

for (var n = 0; n 

arr[n].getColor();

arr[n].draw();

}

setTimeout("playStars()",500);

}

body{

background-color: black;

}

原创，转载请注明出处