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. 字符串反转(java和js)

    写在前面 关于字符串反转的奇技淫巧很多, 会一种就行了, 但是解锁更多姿势可谓艺多不压身啊~~ 正文 java https://www.cnblogs.com/binye-typing/p/92609 ...

  2. easyui datagrid的editor编辑器如何为validatebox控件添加改变事件

    项目中需要为行编辑器Editor的某个列的文本框添加改变事件 需求:新增行时,为用户名输入特殊字符进行验证,不允许保存用户数据 html页面 <table id="gridlist&q ...

  3. [转]vscodesvn安装和使用

    原文链接:https://blog.csdn.net/wzh66888/article/details/90145340 1.安装svn插件 2.安装成功后会出现这样的图标 如果没有安装之后不能使用, ...

  4. kotlin基础 密封类

    密封类 密封类用来表示受限的类继承结构:当一个值为有限几种的类型, 而不能有任何其他类型时.在某种意义上,他们是枚举类的扩展:枚举类型的值集合 也是受限的,但每个枚举常量只存在一个实例,而密封类 的一 ...

  5. Visual-Based Autonomous Driving Deployment from a Stochastic and Uncertainty-Aware Perspective

    张宁 Visual-Based Autonomous Driving Deployment from a Stochastic and Uncertainty-Aware Perspective Le ...

  6. 树莓派小用手册（安装系统，配置图形界面，连接WiFi，调用摄像头，安装ffmpeg）

    安装树莓派系统(重装) 准备工作: 安装需要干净的TF卡(最好 8G 以上),如果是重装的话,需要先将其清理后再使用.清理步骤下面会给出,清理需要工具 DiskGenius,下载链接:http://w ...

  7. spring boot 打包引入第三方jar

    本文作者:@Ryan Miao 本文链接:https://www.cnblogs.com/woshimrf/p/springboot-package-3rdparty-lib.html 版权声明: 本 ...

  8. 大数据 -- kafka学习笔记：知识点整理（部分转载）

    一 为什么需要消息系统 1.解耦 允许你独立的扩展或修改两边的处理过程,只要确保它们遵守同样的接口约束. 2.冗余 消息队列把数据进行持久化直到它们已经被完全处理,通过这一方式规避了数据丢失风险.许多 ...

  9. oracle 解决 exp 空表不能导出的问题

    原因:oralce_11g 中有个新特性,当表无数据时,不分配 segment,以节省空间,这也就导致了 exp 在导出表时,没有数据的表会被忽略 方法一:我们可以向表中插入数据,在删除,这样数据表就 ...

  10. jquery与angular的交互

    HTML: <table class="table table-striped" ng-app="myApp"> <tr> <th ...