canvas画布中实现气泡

    xiaoxiao2022-07-12  153

    在画布中实现气泡 

    第一步:先定义一个 500*500的画布 <canvas id="wrap" width="500" height="500" ></canvas>

    第二步:给画布设置样式

    <style>     *{         margin: 0;         padding: 0;     }     html,body{

            background: #cccccc;     }     #wrap{         background: #fff;         position: absolute;         top: 0;         left: 0;         right: 0;         bottom: 0;         margin: auto;     } </style>

    第三步:  js代码

    <script type="text/javascript">     (function () {         //获取画板         var canvas = document.querySelector('#wrap');

            if(!canvas.getContext){             return;         }         //定义绘制对象         var ctx = canvas.getContext('2d');

            //定义一个数组存放小圆点         var circleArr=[];

            //进行绘制         //开启定时器         setInterval(function () {        //清除小圆点             ctx.clearRect(0,0,canvas.width,canvas.height);             for (var i = 0; i < circleArr.length; i++) {               var circle = circleArr[i];               circle.r ++;  //半径不断变大               circle.opacity -=0.01;//透明度不短减小

                  //点透明度少于0  直接清除               if(circle.opacity<=0){                   circleArr.splice(i,1);               }

                  ctx.beginPath();                ctx.fillStyle = 'rgba('+circle.red+','+circle.green+','+circle.blue+','+circle.opacity+')';               ctx.arc(circle.x,circle.y,circle.r,0,Math.PI*2);               ctx.fill();             }

            },16);

            setInterval(function () {             //开始绘制圆点             var circle = {};             //坐标             circle.x = Math.random() * canvas.width;             circle.y = Math.random() * canvas.height;

                circle.r = 10;  //半径             circle.red = Math.random() * 255;             circle.green = Math.random() * 255;             circle.blue = Math.random() * 255;             circle.opacity = 1;  //透明度

                circleArr.push(circle);         },50)

        })()

    </script>

     

     

     

     

     

     

    希望对您有用

    本人为前端菜鸟,如上面言论有误,希望大家能在下方评论指出,让菜鸟可以飞一飞~~

    最新回复(0)