深受喜爱的变幻小气泡(画布完成的)

最新推荐文章于 2022-11-16 17:05:52 发布

Mr_Liu3518

最新推荐文章于 2022-11-16 17:05:52 发布

阅读量723

点赞数 2

分类专栏： canvas动画文章标签： canvas

本文链接：https://blog.youkuaiyun.com/Mr_Liu3518/article/details/77680109

版权

canvas动画专栏收录该内容

2 篇文章

订阅专栏

canvas制作的变幻小气泡效果图

这里写图片描述
首先在html当中设置canvas标签

<canvas id="canvas" width="500" height="500" style="border:1px solid red;">
    请升级您的浏览器（不识别的浏览器是会看是到内容的）
</canvas>

接下来的没一步都是在js中完成书写的
首先获取画布，获取画布上下文：

var cav = document.querySelector('#canvas');
    var ctx = cav.getContext('2d');//获取上下文

接着创建一个ball类，也是此图最重要的几步：

//创建ball类
    //定义常量
    const W = cav.width;
    const H = cav.height;
    //获取随机数的函数
    var rand = (min,max) => parseInt(Math.random()*(max-min+1)+min); //ES6箭头函数
    class Ball{
        constructor(ctx,w,h){ //传入canvas上下文和宽高
            this.color = `rgb(${rand(1,255)},${rand(1,255)},${rand(1,255)})`;
            var r = rand(5,25);  //半径5 到 25
            this.r = r;
            //设置随机数的位置
            this.maxW = w-r;  //最右边时的圆心位置
            this.maxH = h-r;  //最下面时圆心的位置
            this.x = rand(r,this.maxW); //随机圆心的X轴的坐标位置
            this.y = rand(r,this.maxH); //随机圆心的Y轴的坐标位置
            this.ctx = ctx; //传进来的ctx  画布的上下文

            //设置速度
            var speedX = rand(2,15);//这个速度是随自己心情设置
            this.speedX = rand(0,100)>50?speedX:-speedX;
            var speedY = rand(2,15);
            this.speedY = rand(0,100)>50?speedY:-speedY;
        }
        draw(){  //定义画圆的方法
            this.ctx.beginPath();
            this.ctx.fillStyle = this.color;
            this.ctx.arc(this.x,this.y,this.r,0,Math.PI*2,true);
            this.ctx.closePath();
            this.ctx.fill();
        }
        move(){ //小球移动
            this.x += this.speedX;
            if(this.x>=this.maxW){
                this.speedX *= -1;
            }else if(this.x<this.r){
                this.speedX *= -1;
            }
            this.y += this.speedY;
            if(this.y>=this.maxH){
                this.speedY *= -1;
            }else if(this.y<this.r){
                this.speedY *= -1;
            }
        }

    }

接下来，显示小球，我这里画了100个小球，我们的动态图就此生成了：

for(let i = 0;i < 100;i ++){  //显现小球，画出100个
        let ball = new Ball(ctx,W,H);
        balls.push(ball);
    }

最后一步就是怎样让小球动起来，形成一个如效果图那样的：

var balls = [];
setInterval(function(){
        ctx.clearRect(0,0,W,H);//清除画布
        for( let i = 0; i < balls.length;i ++){
            balls[i].draw();
            balls[i].move();
        }
    },30)

整体的代码给大家看一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变幻小气泡</title>
</head>
<body>
<canvas id="canvas" width="500" height="500" style="border:1px solid red;">
    请升级您的浏览器（不识别的浏览器是会看是到内容的）
</canvas>
<script>
    var cav = document.querySelector('#canvas');
    var ctx = cav.getContext('2d');//获取上下文
    //创建ball类
    //定义常量
    const W = cav.width;
    const H = cav.height;
    //获取随机数的函数
    var rand = (min,max) => parseInt(Math.random()*(max-min+1)+min); //ES6箭头函数
    class Ball{
        constructor(ctx,w,h){ //传入canvas上下文和宽高
            this.color = `rgb(${rand(1,255)},${rand(1,255)},${rand(1,255)})`;
            var r = rand(5,25);  //半径5 到 25
            this.r = r;
            //设置随机数的位置
            this.maxW = w-r;  //最右边时的圆心位置
            this.maxH = h-r;  //最下面时圆心的位置
            this.x = rand(r,this.maxW); //随机圆心的X轴的坐标位置
            this.y = rand(r,this.maxH); //随机圆心的Y轴的坐标位置
            this.ctx = ctx; //传进来的ctx  画布的上下文

            //设置速度
            var speedX = rand(2,15);//这个速度是随自己心情设置
            this.speedX = rand(0,100)>50?speedX:-speedX;
            var speedY = rand(2,15);
            this.speedY = rand(0,100)>50?speedY:-speedY;
        }
        draw(){  //定义画圆的方法
            this.ctx.beginPath();
            this.ctx.fillStyle = this.color;
            this.ctx.arc(this.x,this.y,this.r,0,Math.PI*2,true);
            this.ctx.closePath();
            this.ctx.fill();
        }
        move(){ //小球移动
            this.x += this.speedX;
            if(this.x>=this.maxW){
                this.speedX *= -1;
            }else if(this.x<this.r){
                this.speedX *= -1;
            }
            this.y += this.speedY;
            if(this.y>=this.maxH){
                this.speedY *= -1;
            }else if(this.y<this.r){
                this.speedY *= -1;
            }
        }

    }
    var balls = [];
    for(let i = 0;i < 100;i ++){  //显现小球，画出100个
        let ball = new Ball(ctx,W,H);
        balls.push(ball);
    }
    setInterval(function(){
        ctx.clearRect(0,0,W,H);//清除画布
        for( let i = 0; i < balls.length;i ++){
            balls[i].draw();
            balls[i].move();
        }
    },30)
</script>
</body>
</html>