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;
}
原创,转载请注明出处