用h5的canvas实现动画的泡沫

效果图1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            background-color: pink;
        }
        canvas{
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            background-color: white;
        }
    </style>
</head>
<body>
    <canvas width="400" height="400"></canvas>
    <script>
        var oC = document.querySelector("canvas");
        if(oC.getContext){
            var ctx = oC.getContext("2d");
            var arr = [];
            //将数组中的圆绘制到画布上
            setInterval(function(){
                ctx.clearRect(0,0,oC.width,oC.height);
                for(i=0;i<arr.length;i++){
                    ctx.save();
                    ctx.beginPath();
                    ctx.fillStyle = "rgba("+arr[i].red+","+arr[i].blue+","+arr[i].yellow+","+arr[i].alp+")";
                    ctx.arc(arr[i].x,arr[i].y,arr[i].r,0,2*Math.PI);
                    ctx.fill();
                    ctx.restore();
                    if(arr[i].alp<=0){
                        arr.splice(i,1);
                    }
                    arr[i].r++;
                    arr[i].alp -=0.01;
                }
            },1000/60)
             //往arr中注入随机圆的信息
            setInterval(function(){
                var x = Math.random()*oC.width;
                var y = Math.random()*oC.height;
                var r = 10;
                var red = Math.round(Math.random()*255);
                var blue = Math.round(Math.random()*255);
                var yellow = Math.round(Math.random()*255);
                var alp = 1;
                arr.push({
                    x:x,
                    y:y,
                    r:r,
                    red:red,
                    blue:blue,
                    yellow:yellow,
                    alp:alp,
                })
            },100)
        }
    </script>
</body>
</html>

效果图2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            background-color: pink;
        }
        canvas{
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            background-color: white;
        }
    </style>
</head>
<body>
    <canvas width="150" height="400"></canvas>
    <script>
        var oC = document.querySelector("canvas");
        if(oC.getContext){
            var ctx = oC.getContext("2d");
            var arr = [];
            //将数组中的圆绘制到画布上
            setInterval(function(){
                ctx.clearRect(0,0,oC.width,oC.height);
                for(i=0;i<arr.length;i++){
                    ctx.save();
                    ctx.beginPath();
                    ctx.fillStyle = "rgba("+arr[i].red+","+arr[i].blue+","+arr[i].yellow+","+arr[i].alp+")";
                    ctx.arc(arr[i].x,arr[i].y,arr[i].r,0,2*Math.PI);
                    ctx.fill();
                    ctx.restore();
                    arr[i].deg +=6;
                    arr[i].x = arr[i].startX + Math.sin(arr[i].deg*Math.PI/180)*arr[i].step*2;
                    arr[i].y = arr[i].startY - (arr[i].deg*Math.PI/180)*arr[i].step;
                    if(arr[i].Y<=50){
                        arr.splice(i,1);
                    }
                }
            },1000/60)
             //往arr中注入随机圆的信息
            setInterval(function(){
                var x = Math.random()*oC.width;
                var r = Math.random()*6+2;
                var y = oC.height-r;
                var startX = x;
                var startY = y;
                var red = Math.round(Math.random()*255);
                var blue = Math.round(Math.random()*255);
                var yellow = Math.round(Math.random()*255);
                var step = Math.random()*20+10;
                var alp = 1;
                var deg = 0;
                arr.push({
                    x:x,
                    y:y,
                    r:r,
                    red:red,
                    blue:blue,
                    yellow:yellow,
                    alp:alp,
                    step:step,
                    startX:startX,
                    startY:startY,
                    deg:deg
                })
            },100)
        }
    </script>
</body>
</html>

用到的知识点：

 h5中canvas相关的知识点：

  save（）      canvas2D API通过将当前状态放入栈中，保存canvas全部状态的方法，调用sava时，将样式容器里的状态压入样式表。

restore（）   调用restore时，将样式栈的栈顶状态弹出到样式容器里进行覆盖。

clearRect（x，y，width，height）    清楚指定矩形区域，让清除部分完全透明。

                x与y指定了画布上所绘制的矩形的左上角（相对于原点）的坐标。

fillStyle   设置图形的填充颜色。

closePath（）  此方法会通过绘制一条从当前点到开始点的直线来闭合图形。

stroke（）    通过线条来绘制图形轮廓。（不会自动调用closePath（））

fill（）      通过填充区域的内容区域生成实心的图形。（会自动调用closePath（））

arc（x，y，radius，startAngle，endAngle，anticlockwise）      画一个以（x，y）为圆心的以radius为半径的圆弧，从startAngle开始到endAngle 结束，按照anticlockwise给定的方向（默认为顺时针）生成。

JS中用到的知识点

 Math.round（）   可对一个数进四舍五入取整。

 Math.random（） 可生成一个0~1之间的随机数。

 Math.sin（）  正弦函数。

 Math.PI（）圆周率。

 splice（）  可用于删除数组中指定的元素。

                   两个参数：参数一：删除数组第几个。

                                     参数二：删除几个数据。

————————————————

原文链接：https://blog.csdn.net/weixin_43571052/article/details/90233193

发表评论取消回复