canvas-忽闪忽闪梦幻小泡泡

作者: 云桃桃 | 来源:发表于2019-05-21 19:19 被阅读0次

canvas-忽闪忽闪梦幻小泡泡
梦幻泡泡
canvas基础知识总结
梦幻泡泡浴
#肥鸽子的禅绕乐园# D13☞「竞争」
身体怎么能健康
《女儿们的恋爱》之张豆豆篇
出发
万万没想到！泡泡糖竟由一名小会计发明？
2018-07-24

在前文的基础上，加入了透明度的小泡泡，改为小星星就是忽闪的小星星咯。。。

1.gif

var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;





function Ball() {
    this.r=Math.floor(Math.random()*15)+5;
    this.x=Math.floor(Math.random()*canvas.width);
    this.y=Math.floor(Math.random()*50);
    this.opa=parseFloat(Math.random().toFixed(2));
    // 透明度增量值
    this.opaOriNum=0.05;
//    this.frameY=Math.floor(Math.random()*50);

    // 小于totalFrame 
    this.frameY=Math.floor(Math.random()*30);
    this.color=`rgba(${Math.floor(Math.random()*255)},${Math.floor(Math.random()*200)},${Math.floor(Math.random()*200)},${this.opa})`;
    this.targetY=Math.floor(Math.random()*350+(canvas.height-350));
    this.totalFrame=Math.floor(Math.random())*150+350;
    this.aniEffect=Math.floor(Math.random()*3);
}
Ball.effectArr=['easeIn','easeOut','easeInOut'];


/*
* 根据位置画圆圈
*
* */

Ball.prototype.draw=function () {

    //t:初始运动帧数（变化）
    //b:开始帧数的位置 （无变化）
    //c:目标运动位置（无变化）
    //d:总帧数 （不变）
    this.y=Tween.Bounce[Ball.effectArr[this.aniEffect]](this.frameY,this.r,this.targetY,this.totalFrame);
    var regRgb=/rgba\((\d+),(\d+),(\d+),(0\.\d+)\)/;
    regRgb.test(this.color);
    ctx.beginPath();
    ctx.fillStyle=`rgba(${RegExp.$1},${RegExp.$2},${RegExp.$3},${this.opa})`;
    ctx.arc(this.x,this.y,this.r,0,2*Math.PI,false);
    ctx.fill();

};
/*
 * 每次走完均改变颜色
 *
 * */
Ball.prototype.changeColor= function () {
    this.color=`rgba(${Math.floor(Math.random()*255)},${Math.floor(Math.random()*200)},${Math.floor(Math.random()*200)},${Math.random().toFixed(2)})`;
}



var ballArr=[];

for(var i=0;i<40;i++){
    ballArr.push(new Ball());
}

var ballAni=setInterval(function () {
    ctx.clearRect(0,0,canvas.width,canvas.height);

    for(var k=0;k<ballArr.length;k++){
        ballArr[k].draw();
        // 控制透明度 忽闪忽闪
        if(ballArr[k].opa>=0.9){
            ballArr[k].opaOriNum=-0.05;

        }else if(ballArr[k].opa<=0.1){
            ballArr[k].opaOriNum=0.05;
        }

        ballArr[k].opa+=ballArr[k].opaOriNum;
        // 当帧数走完
        if(ballArr[k].y>=ballArr[k].targetY){
            ballArr[k].frameY=0;
            // 动画效果更换
            ballArr[k].aniEffect=Math.floor(Math.random()*3);
            // 改变颜色
            ballArr[k].changeColor();
        }else{
            ballArr[k].frameY++;
        }
    }

},24);