首页 > 代码库 > HTML5制作满天星

HTML5制作满天星

2024-08-03 23:07:53   218人阅读

 1、了解canvas
 
<canvas id="stars" height="600"></canvas>
 
这是画布
2、设置body背景色
 
<style type="text/css">
    body{
        background-color: black;
    }
</style>
 
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 = http://www.mamicode.com/"../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<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 = http://www.mamicode.com/"../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>
 
原创，转载请注明出处 

HTML5制作满天星


联系
我们