Main.html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>Canvas - 气泡</title>
    </head>

    <body ng-app="myApp" ng-controller="myCtrl">
        <div class="cd-content" style="background: #93E2CD;">
            <div class="main">
                <div class="page_container">
                    <canvas width="100%" height="100%" class="snow"></canvas>
                </div>
            </div>
        </div>
        <script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
        <script src="js/home.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("canvas.snow").home({
                    windPower: 0,
                    speed: 0,
                    color: "#F21313",
                    size: 80,
                    opacity: 0.00000001,
                    count: 25,
                    interaction: false
                });
            });
        </script>
    </body>

</html>

home.js

!function($){

  var defaults = {
    speed: 0,
    interaction: true,
    size: 2,
    count: 200,
    opacity: 0,
    color: "#ffffff",
    windPower: 0,
    image: false
    };

  $.fn.home = function(options){
    var settings = $.extend({}, defaults, options),
        el = $(this),
        flakes = [],
        canvas = el.get(0),
        ctx = canvas.getContext("2d"),
        flakeCount = settings.count,
        mX = -100,
        mY = -100;

        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

    (function() {
        var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame ||
        function(callback) {
            window.setTimeout(callback, 1000 / 60);
        };
        window.requestAnimationFrame = requestAnimationFrame;
    })();

    function snow() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        for (var i = 0; i < flakeCount; i++) {
            var flake = flakes[i],
                x = mX,
                y = mY,
                minDist = 100,
                x2 = flake.x,
                y2 = flake.y;

            var dist = Math.sqrt((x2 - x) * (x2 - x) + (y2 - y) * (y2 - y)),
                dx = x2 - x,
                dy = y2 - y;

            if (dist < minDist) {
                var force = minDist / (dist * dist),
                    xcomp = (x - x2) / dist,
                    ycomp = (y - y2) / dist,
                    deltaV = force / 2;

                flake.velX -= deltaV * xcomp;
                flake.velY -= deltaV * ycomp;

            } else {
                flake.velX *= .98;
                if (flake.velY <= flake.speed) {
                    flake.velY = flake.speed
                }

                switch (settings.windPower) {
                  case false:
                    flake.velX += Math.cos(flake.step += .05) * flake.stepSize;
                  break;

                  case 0:
                    flake.velX += Math.cos(flake.step += .05) * flake.stepSize;
                  break;

                  default:
                    flake.velX += 0.01 + (settings.windPower/100);
                }
            }

            var s = settings.color;
            var patt = /^#([\da-fA-F]{2})([\da-fA-F]{2})([\da-fA-F]{2})$/;
            var matches = patt.exec(s);
            var rgb = parseInt(matches[1], 16)+","+parseInt(matches[2], 16)+","+parseInt(matches[3], 16);

            flake.y += flake.velY;
            flake.x += flake.velX;

            if (flake.y >= canvas.height || flake.y <= 0) {
                reset(flake);
            }

            if (flake.x >= canvas.width || flake.x <= 0) {
                reset(flake);
            }
            if (settings.image == false) {
              ctx.fillStyle = "rgba(" + rgb + "," + flake.opacity + ")"
              ctx.beginPath();
              ctx.arc(flake.x, flake.y, flake.size, 0, Math.PI * 2);
              ctx.fill();
            } else {

              ctx.drawImage($("img#lis_flake").get(0), flake.x, flake.y, flake.size * 2, flake.size * 2);
            }

        }
        requestAnimationFrame(snow);
    };

    function reset(flake) {

        if (settings.windPower == false || settings.windPower == 0) {
          flake.x = Math.floor(Math.random() * canvas.width);
          flake.y = 0;
        } else {
          if (settings.windPower > 0) {
            var xarray = Array(Math.floor(Math.random() * canvas.width), 0);
            var yarray = Array(0, Math.floor(Math.random() * canvas.height))
            var allarray = Array(xarray, yarray)

            var selected_array = allarray[Math.floor(Math.random()*allarray.length)];

             flake.x = selected_array[0];
             flake.y = selected_array[1];
          } else {
            var xarray = Array(Math.floor(Math.random() * canvas.width),0);
            var yarray = Array(canvas.width, Math.floor(Math.random() * canvas.height))
            var allarray = Array(xarray, yarray)

            var selected_array = allarray[Math.floor(Math.random()*allarray.length)];

             flake.x = selected_array[0];
             flake.y = selected_array[1];
          }
        }

        flake.size = (Math.random() * 3) + settings.size;
        flake.speed = (Math.random() * 1) + settings.speed;
        flake.velY = flake.speed;
        flake.velX = 0;
        flake.opacity = (Math.random() * 0.5) + settings.opacity;
    }
     function init() {
      for (var i = 0; i < flakeCount; i++) {
          var x = Math.floor(Math.random() * canvas.width),
              y = Math.floor(Math.random() * canvas.height),
              size = (Math.random() * 3)  + settings.size,
              speed = (Math.random() * 1) + settings.speed,
              opacity = (Math.random() * 0.5) + settings.opacity;

          flakes.push({
              speed: speed,
              velY: speed,
              velX: 0,
              x: x,
              y: y,
              size: size,
              stepSize: (Math.random()) / 30,
              step: 0,
              angle: 180,
              opacity: opacity
          });
      }

      snow();
    }

    if (settings.image != false) {
      $("<img src='"+settings.image+"' style='display: none' id='lis_flake'>").prependTo("body")
    }

    init();

    $(window).resize(function() {
      if(this.resizeTO) clearTimeout(this.resizeTO);
      this.resizeTO = setTimeout(function() {
        el2 = el.clone();
        el2.insertAfter(el);
        el.remove();

        el2.let_it_snow(settings);
      }, 200);
    });

    if (settings.interaction == true) {
      canvas.addEventListener("mousemove", function(e) {
          mX = e.clientX,
          mY = e.clientY
      });
    }
  }
}(window.jQuery);

Canvas - 气泡的更多相关文章

  1. 原生js实现canvas气泡冒泡效果

    说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单2, 只需引入J ...

  2. Android超简单气泡效果

    阿里P7移动互联网架构师进阶视频(每日更新中)免费学习请点击:https://space.bilibili.com/474380680最近有用到水下气泡上升效果,因此在网上查了一下资料,结果还真找到了 ...

  3. java-js知识库之二——canvas绘制炫彩气泡

    现在使用canvas绘制气泡,虽说很多人都已经实现过了,可能方法都大同小异,但自己写和看别人写完全是两码事,自己会写的才是自己的,话不多说,直接上代码. 先来一张效果图: 现在上代码,代码有详细的注释 ...

  4. canvas绘制气泡

    思路:使用Math.random()函数绘制是个不同位置,大小,颜色的圆形,然后设置定时器,前一个状态用一个与画布相同颜色的背景图片进行覆盖,改变圆形的位置,每次改变都是在这张空白的背景图片上面重新进 ...

  5. canvas动画：气泡上升效果

    HTML5中的canvas真是个很强大的东西呢! 这几天突发奇想想做一个气泡上升的动画,经过许久的思考和多次失败,终于做出了如下效果 由于是录制的gif图,看着会有点卡顿,实际演示是很自然的 想要做出 ...

  6. canvas实现酷炫气泡效果

    canvas实现动画主要是靠设置定时器(setinterval())和定时清除画布里的元素实现,canvas动画上手很简单,今天可以自己动手来实现一个酷炫气泡效果. 气泡炸裂效果(类似水面波纹) 代码 ...

  7. 相识HTML5 canvas

    Canvas是HTML的API,我们可以用它在网页中实时的来生成图像. 文章导读 1.必备技能 2.用于画图的函数 例子: -会话气泡-    -心形-    -钟表-      -星球里的星星- - ...

  8. 让自己也能使用Canvas

    <canvas> 是 HTML5 新增的元素,可使用JavaScript脚本来绘制图形.例如:画图,合成照片,创建动画甚至实时视频处理与渲染. 兼容性方面,除了一些骨灰级浏览器IE6.IE ...

  9. canvas基础2--绘制图形

    栅格 绘制矩形 不同于SVG,HTML中的元素canvas只支持一种原生的图形绘制:矩形.所有其他的图形的绘制都至少需要生成一条路径.不过,我们拥有众多路径生成的方法让复杂图形的绘制成为了可能. 首先 ...

随机推荐

  1. Java for LeetCode 061 Rotate List

    Given a list, rotate the list to the right by k places, where k is non-negative. For example: Given ...

  2. php 用封装类的方法操作数据库和批量删除

    封装类 <?php class DBDA { public $host="localhost"; //服务器地址 public $uid="root"; ...

  3. iOS的I/O操作

    一般而言,处理文件时都要经历以下四个步骤: 1.创建文件 2.打开文件,以便在后面的I/O操作中引用该文件 3.对打开的文件执行I/O操作(读取.写入.更新) 4.关闭文件 iOS中,对文件常见的处理 ...

  4. Ubuntu 下搭建SVN服务器

    root@iZ25q0jd99eZ:~# sudo apt-get install subversion root@iZ25q0jd99eZ:/etc/subversion# mkdir /svn r ...

  5. 会员制实现C2B定制有机农产品，被中粮我买投资的良食网这样卖有机生鲜

    前几天,中粮我买网战略投资了位于深圳的有机生鲜自营平台良食网,宣布双方将会在供应链上展开合作.然而良食网对大家来说还是比较陌生的,为此36氪专访了良食网的创始人唐忠. 良食网成立于2011年,是一家以 ...

  6. ytu 1789:n皇后问题（水题，枚举）

    n皇后问题 Time Limit: 1 Sec  Memory Limit: 64 MB  Special JudgeSubmit: 12  Solved: 3[Submit][Status][Web ...

  7. jetty与hessian结合

    Hessian是由caucho提供的一个基于binary-RPC实现的远程通讯library,支持多种语言,包括c++,java,c#等,还支持flash/flex     Jetty 是一个开源的s ...

  8. php加密解密

    <?php . [代码][PHP]代码      <?php , ;         return setcookie($name, $value, $expire, $path, $do ...

  9. vijos p1002 dp ***

    链接:点我 一开始的方程式很好写的,但是数据太大,考虑到石子数目很小,我们对其进行离散化,若相邻两点距离超过ya的值,则后面所有点都往前移动,这里ya的值是可以调整的 #include <ios ...

  10. HDU 4349 Xiao Ming's Hope lucas定理

    Xiao Ming's Hope Time Limit:1000MS     Memory Limit:32768KB  Description Xiao Ming likes counting nu ...