HTML5中的canvas真是个很强大的东西呢！

这几天突发奇想想做一个气泡上升的动画，经过许久的思考和多次失败，终于做出了如下效果

由于是录制的gif图，看着会有点卡顿，实际演示是很自然的

想要做出这种效果需要用到大量的随机数

先上代码：

CSS+HTML

 

    
                 
     
      您的浏览器不支持canvas
     

 

JS

let canvas1 = document.getElementById('canvas1');let context1 = canvas1.getContext('2d');let canvasH = 300;function resizeCanvas() {    if (window.innerHeight > 1920) {        canvas1.width = window.innerWidth;    }    else {        canvas1.width = 1920;    }    canvas1.height = canvasH;}//设置canvas宽高resizeCanvas(canvas1);let num = 100;//气泡数量let ballX = [];//球心的横坐标let ballY = [];//球心的纵坐标let ballR = [];//球的半径let ballF = [];//小球左右摆动幅度let speed = [];//小球向上移动速度let colours = ["rgb(91,155,213)","rgb(180,199,231)","rgb(0,0,255)","rgb(46,177,182)","rgb(68,114,196)"];//小球颜色let finalCol=[];//在随机位置产生num个随机半径的球，储存变量for(let i = 0;i < num; i++) {    let radius = Math.floor(Math.random() * 15 + 10);    let x = Math.floor(Math.random() * canvas1.offsetWidth);    let y = Math.floor(Math.random() * 300);    let fudu = Math.floor(Math.random() * 10 + 5);    let sp = Math.floor(Math.random() * 30 + 5);    let color = colours[Math.floor(Math.random() * colours.length)];    ballX.push(x);    ballY.push(y);    ballR.push(radius);    ballF.push(fudu);    speed.push(sp);    finalCol.push(color);}let reX;let reY;let ballK=[];//使小球移动(向上做曲线运动)function move(){    context1.clearRect(0, 0, canvas1.offsetWidth, 300);    for(let i = 0;i < num; i++) {        (function (i) {            if(ballK[i] == null){                ballK[i] = 0;            }            reX = ballK[i] * speed[i] + ballY[i];            reY = Math.sin(ballK[i]) * ballF[i] + ballX[i];            if(reX + ballR[i] <= 0){                ballY[i] = 320;                ballK[i] = 0;                reX = ballK[i] * speed[i] + ballY[i];            }            context1.beginPath();            context1.fillStyle = finalCol[i];            context1.globalAlpha = 0.5;            context1.arc(reY, reX, ballR[i], 0, Math.PI * 2);            context1.fill();            ballK.splice(i,1,ballK[i]);            ballK[i]-=0.1;        })(i);    }}setInterval(move,20);//定时器

整体思路：

首先定义几个数组，一个是装横坐标，一个装纵坐标，一个装半径，一个装圆的颜色

绘制若干个圆，圆心的横坐标、纵坐标、半径全部采用随机数的形式得到

用fill()方法填充圆，fillStyle()方法指定颜色，颜色也全部用随机数得到

用golbalAlpha设置透明度

这样每个圆都有了自己的初始位置，颜色，和透明度

然后开始绘制每个球的运动路线

绘制路线这里我用了sin函数，通过该变角度，振幅等来改变路线，因此又要定义两个数组，一个装振幅，另外一个装圆移动的速度，这两个变量也用随机数的形式得到

因为sin函数的轨迹总体是水平方向上的运动，因此如果想实现从下往上，就要把横坐标与纵坐标颠倒过来

当圆从下往上运动时，如果圆已经移出了canvas的范围也就是圆心的纵坐标-半径<=0，那么改变圆的坐标，这样就可以循环从下往上运动了

设置定时器，每过20毫秒，使用clearRect清除先前的圆的位置，并在新的位置上绘制圆

说了这么多，个人认为这个动画的核心是储存变量。