canvas实现动画主要是靠设置定时器（setinterval（））和定时清除画布里的元素实现，canvas动画上手很简单，今天可以自己动手来实现一个酷炫气泡效果。

  1. 气泡炸裂效果（类似水面波纹）

代码如下：

<!DOCTYPE html>

<html lang="zh">

<head>

  <meta charset="UTF-8">

  <title>canvas实现气泡效果</title>

  <style>

    *{

      margin: 0;

      padding: 0;

    }

    html,body{

      height: 100%;

      overflow: hidden;

      background: gray;

    }

    canvas{

      position: absolute;

      left: 0;

      top: 0;

      right: 0;

      bottom: 0;

      margin: auto;

      background: white;

    }

  </style>

  <script>

    window.onload=function(){

      var oc=document.querySelector("canvas");

      if(oc.getContext){

        var ctx=oc.getContext("2d");

        // 定义一个数组，用来保存canvas中各个圆的信息；

        var arr=[];

        //随机取出数组中的圆，绘制在canvas中；

        setInterval(function(){

          for(var i=0;i<arr.length;i++){

            arr[i].r++;

            arr[i].apl-=0.01;

            if(arr[i].apl<=0){

              arr.splice(i,1);

            }

          }

          ctx.clearRect(0,0,oc.width,oc.height);

          for(var i=0;i<arr.length;i++){

            ctx.save();

            ctx.fillStyle="rgba("+arr[i].red+","+arr[i].green+","+arr[i].blue+","+arr[i].apl+")";

            ctx.beginPath();

            ctx.arc(arr[i].x,arr[i].y,arr[i].r,0,2*Math.PI);

            ctx.fill();

            ctx.restore();

          }

        },1000/60);

        // 向数组中随机注入圆的信息；

        setInterval(function(){

          var red=Math.round(Math.random()*255);

          var green=Math.round(Math.random()*255);

          var blue=Math.round(Math.random()*255);

          var apl=1;

          var x=Math.random()*oc.width;

          var y=Math.random()*oc.height;

          var r=10;

          arr.push(

            {

              red:red,

              green:green,

              blue:blue,

              apl:apl,

              x:x,

              y:y,

              r:r

            }

          );

        },50);

      }

    }

  </script>

</head>

<body>

  <canvas width="400" height="400"></canvas>

</body>

</html>
  1. 气泡上升效果

代码如下：

<!DOCTYPE html>

<html lang="zh">

<head>

  <meta charset="UTF-8">

  <title>canvas实现气泡效果</title>

  <style>

    *{

      margin: 0;

      padding: 0;

    }

    html,body{

      height: 100%;

      overflow: hidden;

      background: gray;

    }

    canvas{

      position: absolute;

      left: 0;

      top: 0;

      right: 0;

      bottom: 0;

      margin: auto;

      background: white;

    }

  </style>

  <script>

    window.onload=function(){

      var oc=document.querySelector("canvas");

      if(oc.getContext){

        var ctx=oc.getContext("2d");

        // 定义一个数组，用来保存canvas中各个圆的信息；

        var arr=[];

        //随机取出数组中的圆，绘制在canvas中；

        setInterval(function(){

          for(var i=0;i<arr.length;i++){

            arr[i].r++;

            arr[i].apl-=0.01;

            if(arr[i].apl<=0){

              arr.splice(i,1);

            }

          }

          ctx.clearRect(0,0,oc.width,oc.height);

          for(var i=0;i<arr.length;i++){

            ctx.save();

            ctx.fillStyle="rgba("+arr[i].red+","+arr[i].green+","+arr[i].blue+","+arr[i].apl+")";

            ctx.beginPath();

            ctx.arc(arr[i].x,arr[i].y,arr[i].r,0,2*Math.PI);

            ctx.fill();

            ctx.restore();

          }

        },1000/60);

        // 向数组中随机注入圆的信息；

        setInterval(function(){

          var red=Math.round(Math.random()*255);

          var green=Math.round(Math.random()*255);

          var blue=Math.round(Math.random()*255);

          var apl=1;

          var x=Math.random()*oc.width;

          var y=Math.random()*oc.height;

          var r=10;

          arr.push(

            {

              red:red,

              green:green,

              blue:blue,

              apl:apl,

              x:x,

              y:y,

              r:r

            }

          );

        },50);

      }

    }

  </script>

</head>

<body>

    <canvas width="400" height="400"></canvas>

</body>

</html>

canvas实现酷炫气泡效果的更多相关文章

  1. iOS酷炫动画效果合集

    iOS酷炫动画效果合集 源码地址 https://github.com/YouXianMing/Animations 效果绝对酷炫,包含了多种多样的动画类型,如POP.Easing.粒子效果等等,虽然 ...

  2. html5+Canvas实现酷炫的小游戏

    最近除了做业务,也在尝试学习h5和移动端,在这个过程中,学到了很多,利用h5和canvas做了一个爱心鱼的小游戏.点这里去玩一下 PS: 貌似有点闪屏,亲测多刷新两下就好了==.代码在本地跑都不会闪, ...

  3. 基于ViewPager的一些酷炫切换效果

    1.ViewPager可以用于实现类似banner的功能,我曾经在“时间超市”项目中使用过.但如何在此基础上实现一些切换的酷炫效果呢?今天细细品读了鸿洋大神的相关博文,终于学会了如何自定义切换效果. ...

  4. 用canvas制作酷炫射击游戏--part3

    今天介绍下 游戏中的sprite模块,也就是构建玩家及怪物的模块.有了这个模块,就可以在咱们的游戏里加入人物了. 想必用过css的朋友都知道sprite,一种将需要加载的图片拼接在一张图里以减少请求的 ...

  5. 用canvas制作酷炫射击游戏--part1

    好久没写博客了,因为过年后一直在学游戏制作方面的知识.学得差不多后又花了3个月时间做了个作品出来,现在正拿着这个作品找工作. 作品地址:https://betasu.github.io/Crimonl ...

  6. 用canvas制作酷炫射击游戏--part2

    今天这一部分主要讲游戏的实现原理与游戏循环的代码实现. 先说原理,大家都看过动画吧.在我看来,游戏就是玩家能人为控制动画剧情发展方向的动画.所以,我们的游戏引擎其实说白了就是个动画引擎再加上鼠标事件. ...

  7. HTML5 Canvas玩转酷炫大波浪进度图

    如上图所见,本文就是要实现上面那种效果. 由于最近AlloyTouch要写一个下拉刷新的酷炫loading效果.所以首选大波浪进度图. 首先要封装一下大波浪图片进度组件.基本的原理是利用Canvas绘 ...

  8. 纯CSS3实现的一些酷炫效果

    之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...

  9. css3实现酷炫的3D盒子翻转效果

    简介 运用css3先在平面空间组成立方体盒子,再让整个盒子翻转起来,先来张效果图: 步骤 1.先用css将6张图片摆成下图的样子: 下面就是通过css3的3D变换将每个面进行翻转,使之成为一个立体的盒 ...

随机推荐

  1. JVM探究之 —— 类文件结构（脑图）

  2. linux tomcat 文件切割

    修改bin目录下catalina.sh if [ -z "$CATALINA_OUT" ] ; then CATALINA_OUT="$CATALINA_BASE&quo ...

  3. 如何用 Go 实现热重启

    热重启 热重启(Zero Downtime),指新老进程无缝切换,在替换过程中可保持对 client 的服务. 原理 父进程监听重启信号 在收到重启信号后,父进程调用 fork ,同时传递 socke ...

  4. MyBatis 返回 List mapperxml怎么写

    转: MyBatis 返回 List mapperxml怎么写? 原创 微wx笑 发布于2018-06-20 13:59:23 阅读数 10742 收藏 展开 有时候,我们不需要整个表的所有字段,而是 ...

  5. OSI七层模型、TCP/IP五层模型

    OSI网络互连的七层框架:物理层.数据链路层.网络层.传输层.会话层.表示层.应用层: <1>应用层 OSI参考模型中最靠近用户的一层,是为计算机用户提供应用接口,为用户直接提供各种网络服 ...

  6. (原)关于使用zoompad滤镜生成一个转场效果

    之前在 http://bbs.chinaffmpeg.com/forum.php?mod=viewthread&tid=1294&extra=page%3D1 上分享过一个转场效果,今 ...

  7. 阿里云composer 镜像

    2019年12月2日13:54:32 https://developer.aliyun.com/composer 阿里云的镜像更新时间比较及时 本镜像与 Packagist 官方实时同步,推荐使用最新 ...

  8. 忘记树莓派pi账户密码简单重设

    网上搜到的教程多是要修改cmdline.txt,非常繁琐,其实树莓派本身的root账户还没有启用,在root账户下重设pi的密码是很容易的,下面教你启用root账户,一切都需要在树莓派本机上操作 打开 ...

  9. 删除lvm时出现"Logical volume contains a filesystem in use"

    问题描述: k8s环境中需要重新创建lvm:/dev/mapper/test-vg-test-storage,该lvm挂载在/data/prometheus下面,在删除出现"Logical ...

  10. python的帮助信息的写法

    # coding = utf-8from optparse import OptionParserfrom optparse import OptionGroup usage = 'Usage: %p ...