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. pandas.DataFrame.dropna删除缺失值

    https://study.163.com/course/courseMain.htm?share=2&shareId=400000000398149&courseId=1006383 ...

  2. vs2015 如何更改背景主题颜色

    打开vs2015 步骤:工具--> 选项 -->环境-->常规-->主题设置

  3. centos6.9安装python3.6.9独立的virtualenv环境，并且能正确引入ssl

    centos6.9安装python3.6.9独立的virtualenv环境,并且能正确引入ssl 1.编译安装python3.6环境# 安装依赖yum -y install zlib-devel bz ...

  4. 大话图解golang map

    前言 网上分析golang中map的源码的博客已经非常多了,随便一搜就有,而且也非常详细,所以如果我再来写就有点画蛇添足了(而且我也写不好,手动滑稽).但是我还是要写,略略略,这篇博客的意义在于能从几 ...

  5. 【转】模糊测试（fuzzing）是什么

    一.说明 大学时两个涉及“模糊”的概念自己感觉很模糊.一个是学数据库出现的“模糊查询”,后来逐渐明白是指sql的like语句:另一个是学专业课时出现的“模糊测试”. 概念是懂的,不外乎是“模糊测试是一 ...

  6. Celery-系统守护进程

    1. 使用systemd控制Celery 用法: systemctl {start|stop|restart|status} celery.service 配置文件: /etc/celery/cele ...

  7. java Random 抢红包算法

    红包有一个总金额和总数量,领的时候随机分配金额. 维护一个剩余总金额和总数量,分配时,如果数量等于1,直接返回总金额,如果大于1,则计算平均值,并设定随机最大值为平均值的两倍,然后取一个随机值,如果随 ...

  8. LODOP打印图片水平居中

    其他居中,查看本博客相关博文:LODOP中打印项水平居中简短问答.图片也属于超文本打印项,因此如果想把图片居中,也需要图片本身内容相对于图片打印项宽度居中,然后再设置打印项居中.如图,同一张图片,都设 ...

  9. LinkedHashMap原理

    作者:艺旭家 链接:https://www.jianshu.com/p/8f4f58b4b8ab 总结 LinkedHashMap是继承于HashMap,是基于HashMap和双向链表来实现的. Ha ...

  10. java jdbc使用SSH隧道连接mysql数据库demo

    java jdbc使用SSH隧道连接mysql数据库demo   本文链接:https://blog.csdn.net/earbao/article/details/50216999   packag ...