闪烁的星星

实现原理

思路分析

  1. 随机颜色
  2. 使用随机数定义很多大小不同的粒子的尺寸,数量等
  3. 绘制一帧的函数
  4. 使用定时器不停的重绘
  5. 绘制时修改某些变量让画面动起来

关键步骤

定义对象

function Star(x, y, r, max, c, s){
    this.x = x;
    this.y = y;
    this.color = c;
    this.radius = r;
    this.max = max;
    this.speed = s;

    this.draw = function(ctx){
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2);
        ctx.fillStyle = this.color;
        ctx.fill();
    }
}

产生一个随机颜色

function randomColor(){
    var r = Math.floor(Math.random()*255);
    var g = Math.floor(Math.random()*255);
    var b = Math.floor(Math.random()*255);
    return "rgb("+r+", "+g+","+b+")";
}

创建很多星星

var stars = []; // 存放所有星星的实例
function init(cvs){
    // 创建很多星星
    for(var i=0; i<100; i++){
        // 随机产生参数
        var x = Math.random()*cvs.width;
        var y = Math.random()*cvs.height;
        var r = Math.random()*100 +5;
        var m = r * 1.5;
        var c = randomColor();
        var s = Math.random()*3 + 1;
        // 实例化星星
        var star = new Star(x, y, r, m, c, s);
        // 放入到数组集合
        stars.push(star);
    }
}

绘制所有的星星

// 绘制一帧
function draw(cvs){
    var ctx = cvs.getContext("2d");
    // 绘制一帧前先清除画布
    ctx.clearRect(0, 0, cvs.width, cvs.height);

    // 绘制所有的星星
    for(var i = 0; i < stars.length; i++){
        stars[i].draw(ctx);
    }
}

不停的重绘形成动画

window.onload = function(){
    var cvs = document.getElementById("cvs");
    init(cvs); 
    setInterval(draw, 50, cvs); // 定时重绘
};

完整代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript">
        function Star(x, y, r, m, c, s){
            this.x = x;
            this.y = y;
            this.color = c;
            this.radius = r;
            this.max = m;
            this.speed = s;
            this._state = true;

            this.draw = function(ctx){
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2);
                ctx.fillStyle = this.color;
                ctx.fill();

                if (this.radius >= this.max){
                    this._state = false;
                } else if (this.radius <= 0){
                    this._state = true;
                }

                if (this._state){
                    this.radius += this.speed;
                } else {
                    this.radius -= this.speed;
                    if(this.radius < 0)
                        this.radius = 0;
                }
            }
        }

        function randomColor(){
            var r = Math.floor(Math.random()*255);
            var g = Math.floor(Math.random()*255);
            var b = Math.floor(Math.random()*255);
            return "rgb("+r+", "+g+","+b+")";
        }

        var stars = []; // 存放所有星星的实例
        function init(cvs){
            // 创建很多星星
            for(var i=0; i<100; i++){
                // 随机产生参数
                var x = Math.random()*cvs.width;
                var y = Math.random()*cvs.height;
                var r = Math.random()*100 +5;
                var m = r * 1.5;
                var c = randomColor();
                var s = Math.random()*3 + 1;
                // 实例化星星
                var star = new Star(x, y, r, m, c, s);
                // 放入到数组集合
                stars.push(star);
            }
        }

        // 绘制一帧
        function draw(cvs){
            var ctx = cvs.getContext("2d");
            // 绘制一帧前先清除画布
            ctx.clearRect(0, 0, cvs.width, cvs.height);

            // 绘制所有的星星
            for(var i = 0; i < stars.length; i++){
                stars[i].draw(ctx);
            }
        }

        window.onload = function(){
            var cvs = document.getElementById("cvs");
            init(cvs); 
            setInterval(draw, 50, cvs); // 定时重绘
        };
        </script>
    </head>
    <body>
        <canvas id="cvs" width="500" height="500"></canvas>
    </body>
</html>

results matching ""

    No results matching ""