canvas简单流星雨

Html

Css

 * {
	padding:0px;
	margin:0px;
}
html,body {
	width:100%;
	height:100%;
	overflow:hidden;
}

function lx(obj) {
    this.Id = obj.id;
    this.src = obj.src; //图片地址
    this.img = ''; //图片
    this.cxt = ''; //canvas实例
    this.Time = ""; //定时器控制流星运动
    this.Time2 = ""; //定时器创建流星
    this.sum = 500; //流星出现频率
    this.beginIpY = []; //流星初始位置
    this.beginIpX = [];
    this.sd = []; //每个流星的速度
    this.init(); //初始化

}
lx.prototype = {
    init: function() {
        // 布局
        var c = document.getElementById(this.Id);
        c.setAttribute("width", window.innerWidth * 2);
        c.setAttribute("height", window.innerHeight * 2);
        var cxt = c.getContext("2d");
        this.cxt = cxt;
        this.insta();
    },
    // canvas背景
    insta: function() {
        var that = this;
        that.positionStar()

},
    // 创建星星
    newStar: function() {
        this.cxt.clearRect(0, 0, window.innerWidth * 2, window.innerHeight * 2);

this.cxt.strokeStyle = '#fff';
        this.cxt.lineCap = 'round';
        this.cxt.lineWidth = 4;

for (var i = 0; i < this.beginIpY.length; i++) {
            var xw = Math.floor(Math.random() * 10 * window.innerHeight) + 500;
            var ctx = this.cxt;

if (this.beginIpY[i] >= xw) {
                this.beginIpX.splice(i, 1);
                this.beginIpY.splice(i, 1);
                this.sd.splice(i, 1);
            } else {
                this.beginIpX[i] = this.beginIpX[i] + this.sd[i];
                this.beginIpY[i] = this.beginIpY[i] + this.sd[i];
                //径向渐变，从流星头尾圆心，半径越大，透明度越高
                var gra = ctx.createRadialGradient(
                    this.beginIpX[i], this.beginIpY[i], 0, this.beginIpX[i], this.beginIpY[i], 50)
                var PI = Math.PI
                gra.addColorStop(0, '#FFFFFF')
                gra.addColorStop(1, 'rgba(0,0,0,0)')
                ctx.fillStyle = gra
                ctx.beginPath()
                //流星头，二分之一圆
                ctx.arc(this.beginIpX[i], this.beginIpY[i], 2, -PI / 4, -5 * PI / 4)
                //绘制流星尾，三角形
                ctx.lineTo(this.beginIpX[i] - 50, this.beginIpY[i] - 50)
                ctx.closePath()
                ctx.stroke();

}
        }
    },
    //流星定位
    positionStar: function() {
        for (var i = 0; i < 1; i++) {
            var xw = Math.floor(Math.random() * 2000);
            var wt = Math.floor(Math.random() * 30);
            var sd = Math.floor(Math.random() * 4) + 2;
            // 开始位置
            this.beginIpX.push(xw);
            this.beginIpY.push(wt);
            this.sd.push(sd);
        }
        this.starAnimet();
    },
    //添加星星运动
    starAnimet: function() {
        var that = this;
        this.Time = setInterval(function() {
            that.newStar();
        }, 1);
        this.pushStarfun();
    },
    // 定时添加流星雨
    pushStarfun: function() {
        var that = this;
        this.Time2 = setInterval(function() {
            if (that.beginIpY.length < 5) {
                var xw = Math.floor(Math.random() * 2000);
                var wt = Math.floor(Math.random() * 30);
                var sd = Math.floor(Math.random() * 4) + 2;
                // 开始位置
                that.beginIpX.push(xw);
                that.beginIpY.push(wt);
                that.sd.push(sd);
            }
        }, this.sum)
    }
}
 var aa = new lx({
        id: "myCanvas",
        src: "http://www.jq22.com/img/cs/500x500-1.png",
    });

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

canvas简单流星雨



代码描述：使用canvas简单封装的流星雨效果

流星位置，随机生成；流星移动速度个不相同；流星消失后，自动销毁回收内存；面向对象封装、简单易懂；欢迎提供建议!

4

最新

发表评论全部评论

暂时没有评论！

CC_以沫0

2019/1/8 17:17:45

怎么控制流星的方向啊，案例里面是从左往右，我想要的效果是从右往左回复

H0

2018/3/23 11:10:16

流星没有，雨也没有
回复

Crane ♈0

2018/3/12 10:14:53

我盯了半天也没发现流星雨啊+_+

用户名什么的太难想了0

2018/3/12 15:28:17

执行lx.init()方法

回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

云在飞

相关代码

canvas简单流星雨

最新