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. 1.前端笔记之html

    title: 1.前端笔记之HTML date: 2016-04-04 23:21:52 tags: Python categories: Python --- 作者:刘耀 **出处:http://w ...

  2. 2014 牡丹江现场赛 A.Average Score（zoj 3819） 解题报告

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=5373 题目意思: 有两个class:A 和 B,Bob 在 Clas ...

  3. Ubuntu使用tcpdump工具

    Ubuntu默认是安装好了tcpdump工具的,如果没有安装的话使用sudo apt-get install tcpdump即可安装.   (如果遇到tcpdump: no suitable devi ...

  4. icon font字体图标字库汇总

    最近在研究icon font图标字库,找了一些比较好的在线字库.大都是开源的,而且各有特色! 阿里icon font字库 http://www.iconfont.cn/ 这个是阿里妈妈M2UX的一个i ...

  5. 获取Assets目录下的图片并显示

    package com.jingle.getlocal; import java.io.InputStream; import android.app.Activity; import android ...

  6. NGITOSS

    https://sourceforge.net/projects/ngnms/files/?source=navbar http://stackoverflow.com/questions/17511 ...

  7. DRF如何序列化外键的字段

    我觉得在有些应用场景下,这个操作是有用的,因为可以减少一个AJAX的请求,以增加性能. 当然,是二次请求,还是一次传输.这即要考虑用户体验,还要兼顾服务器性能. 一切是有条件的平衡吧.就算是一次传输, ...

  8. mysql事务处理的意义

    MySQL的事务支持不是绑定在MySQL服务器本身,而是与存储引擎相关 1.MyISAM:不支持事务,用于只读程序提高性能 .InnoDB:支持ACID事务.行级锁.并发 .Berkeley DB:支 ...

  9. hdu 4185 二分图匹配

    题意用1*2的木板覆盖矩阵中的‘#’,(木板要覆盖的只能是‘#’),问最多能用几个木板覆盖 将#抽象为二分图的点,一个木板就是一个匹配,注意最后结果要除以2 Sample Input 1 6 .... ...

  10. TypeC一个微软开发的超简单.NET依赖注入/IoC容器

    控制反转(IoC,Inversion of Control)是由Martin Fowler总结出来的一种设计模式,用来减少代码间的耦合.一般而言,控制反转分为依赖注入(Dependency Injec ...