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. 使用ES6删除对象中某些属性

    const form = { id: '011', name: '测试一', description: '测试demo' } // 目标: 取到删除description属性的对象, 即下文的data ...

  2. CatBoost使用GPU实现决策树的快速梯度提升CatBoost Enables Fast Gradient Boosting on Decision Trees Using GPUs

    python机器学习-乳腺癌细胞挖掘(博主亲自录制视频)https://study.163.com/course/introduction.htm?courseId=1005269003&ut ...

  3. Cassandra3在Centos7下启动失败解决办法

    Centos7 安装Cassandra启动过程提示失败,查看结果如下所示: [root@xx ~]# systemctl status cassandra ● cassandra.service - ...

  4. C语言 按位异或实现加法

    /* C语言 按位异或实现加法 */ #include <stdio.h> #include <stdlib.h> #include <string.h> void ...

  5. Java12新特性 -- 默认生成类数据共享(CDS)归档文件

    默认生成类数据共享(CDS)归档文件 同一个物理机/虚拟机上启动多个JVM时,如果每个虚拟机都单独装载自己需要的所有类,启动成本和内 存占用是比较高的.所以Java团队引入了类数据共享机制 (Clas ...

  6. ubuntu解决网络连接的优先级

    ubuntu下无线连接网络,有线连接板卡,解决网络连接的优先级 1. 查看网关  ip route show dev wlp2s0 proto kernel scope link src dev wl ...

  7. Java 8之Map新增方法<转>

    在Java 8中的Map.Entry接口中增加了comparingByKey, comparingByValue方法,它们都返回Comparator<Map.Entry<K,V>&g ...

  8. 如何上传本地jar至远程仓库供其他项目使用

    我们首先需要创建自己内部nexus私服仓库.这里假设你已经做好了. 其次我们要明白nexus上如下几个component的用处. maven-central:maven中央库,默认从https://r ...

  9. SAP翔子_ABAP_DEMO篇索引

    序号 描述 SAP翔子_ABAP_DEMO篇1 ABAP DEMO篇1 单层反查BOM SAP翔子_ABAP_DEMO篇2 ABAP DEMO篇2 删除工艺路线 SAP翔子_ABAP_DEMO篇3 A ...

  10. [转]Ubuntu18.04隐藏顶栏与侧栏

    链接地址:https://blog.csdn.net/liu_jiangwen/article/details/85215297