HTML5练习（1）制作满天星
1、了解canvas
这是画布
2、设置body背景色
3、
初始化画布及context
4、定义星星对象
5、画月亮
6、在onload事件中绘制星星及月亮
之所以要用数组，是因为等下我们要让星星闪起来
7、星星闪起来
原创，转载请注明出处
<
canvas
id
=
"stars"
height
=
"600"
>
</
canvas
>
2、设置body背景色
<
style
type
=
"text/css"
>
body
{
background-color:
black;
}
</
style
>
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
)
;
}
}
//
画
月
亮
function
drawMoon
(
)
{
var moon = new Image();
moon.src = "../img/moon.png"
context.drawImage(moon,10,10);
}
var
arr
=
new
Array
(
)
;
var
starCount
=
1000
;
window
.
onload
=
function
(
)
{
init
(
)
;
//画星星
for
(
var
i
=
0
;
i
<
starCount
;
i
++
)
{
var
star
=
new
Star
(
)
;
star
.
init
(
)
;
star
.
draw
(
)
;
arr
.
push
(
star
)
;
}
drawMoon
(
)
;
}
之所以要用数组，是因为等下我们要让星星闪起来
7、星星闪起来
//星星闪起来
function
playStars
(
)
{
for
(
var
n
=
0
;
n
<
starCount
;
n
++
)
{
arr
[
n
]
.
getColor
(
)
;
//重新获取颜色
arr
[
n
]
.
draw
(
)
;
//重新绘制
}
setTimeout
(
"playStars()"
,
500
)
;
//半秒钟闪一次
}
在onload事件的回调函数最后一行加入调playStars的代码
效果：
全部代码：
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>
满
天
繁
星
</
title
>
<
script
>
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
<
starCount
;
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
<
starCount
;
n
++
)
{
arr
[
n
]
.
getColor
(
)
;
arr
[
n
]
.
draw
(
)
;
}
setTimeout
(
"playStars()"
,
500
)
;
}
</
script
>
<
style
type
=
"text/css"
>
body
{
background-color:
black;
}
</
style
>
</
head
>
<
body
>
<
canvas
id
=
"stars"
height
=
"600"
>
</
canvas
>
</
body
>
</
html
>