<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <canvas id="bubble"></canvas>

    <script type="text/javascript">

        var canvas = document.getElementById('bubble');

        var w = window.innerWidth;

        var h = window.innerHeight

        canvas.width=w;

        canvas.height=h;

        window.onresize=function(){

             w = window.innerWidth;

             h = window.innerHeight

            canvas.width=w;

            canvas.height=h;

        }

        var canCon=canvas.getContext('2d');

        // var y=100,x=100;

        // setInterval(function(){

        //     canCon.clearRect(0,0,w,h);

        //     canCon.beginPath();

        //     canCon.fillStyle='red';

        //     canCon.arc(200,y++,100,0,Math.PI*2)

        //     canCon.fill();

        // },1000/60);

        function random(min,max){

            return Math.random()*(max-min)+min;

        }

        var colorArray = ['#e08031','#c7ceb2','#199475','#0b6e48','#044d22'];

        function Bubble(){};

        var bubble =new Bubble();

        Bubble.prototype={//定义属性

             init:function(){//所有泡泡的基本零件

                 this.x=random(0,w);//浏览器的最左边到最右边

                 this.y=random(0,h);//浏览器的最左边到最右边

                 this.r=random(0,2);//http://www.peise.net/颜色

                 this.color=colorArray[Math.floor(random(0,5))];

                 this.xr=random(-1,1);

                 this.yr=random(-1,1);

                 this.D=50;

             },

             draw:function(){

                 canCon.beginPath();

                 canCon.fillStyle=this.color;

                 canCon.arc(this.x,this.y,this.r,0,Math.PI*2)

                 canCon.fill();

             },

             update:function(){

                 this.x+=this.xr;

                 this.y+=this.yr;

                 if(this.x-this.r<0 || this.x+this.r>w){

                     this.xr = -this.xr;

                 }else if(this.y-this.r<0 || this.y+this.r>h){

                    this.yr = -this.yr;

                 }

                 this.xD= (positionX-this.x<0)?-(positionX-this.x):(positionX-this.x); //小球和鼠标的位置距离

                 this.yD= (positionY-this.y<0)?-(positionY-this.y):(positionY-this.y); //小球和鼠标的位置距离

                 if(this.xD<this.D&&this.yD<this.D){

                     this.r+=1;

                     if(this.r>100){this.r=100};

                 }else if(this.r>4&&this.xD>this.D&&this.yD>this.D){

                     this.r-=1;

                 }

                 this.draw();

             }

        }

         var bublleArray = [];

         function create(){

             var bubble =new Bubble();//shengcheng

             bubble.init();//小泡泡的样子

             bubble.draw();

             bublleArray.push(bubble);//一出生就保存

         }

         for(var i=0;i<10000;i++){

             create();

         }

         setInterval(function(){

             canCon.clearRect(0,0,w,h);

             for(var b of bublleArray){

               b.update();

             }

         },1000/60);

         var positionX,positionY;

         canvas.onmousemove=function(){

             var ev = ev || window.event;

             positionX=ev.clientX;

             positionY=ev.clientY;

             positionX=ev.clientX;

         }

        //春函数就是只进行计算

    </script>

</body>

</html>

canvas 悬浮效果的更多相关文章

  1. 使用Three.js实现神奇的3D文字悬浮效果

    声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 背景 在 Three.js Journey 课程示例中,提供了一个使用 Thre ...

  2. CodePen 作品秀：Canvas 粒子效果文本动画

    作品名称——Shape Shifter,基于 Canvas 的粒子图形变换实验.在页面下方的输入框输入文本,上面就会进行变换出对应的粒子效果文本动画. CodePen 作品秀系列向大家展示来自 Cod ...

  3. Android 仿美团网,大众点评购买框悬浮效果之修改版

    转帖请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/17761431),请尊重他人的辛勤劳动成果,谢谢! 我之前写 ...

  4. 纯CSS实现的右侧底部简洁悬浮效果

    我们见过很多页面右侧浮动效果,最早有QQ联系面板,对联广告等,大多数都是基于Javascript实现的动态效果,今天我给大家分享一个只需要CSS结合DIV实现的右侧浮动效果. HTML 我们希望悬浮效 ...

  5. HTML5 Canvas动画效果演示

    HTML5 Canvas动画效果演示 主要思想: 首先要准备一张有连续帧的图片,然后利用HTML5 Canvas的draw方法在不同的时间 间隔绘制不同的帧,这样看起来就像动画在播放. 关键技术点: ...

  6. Android对ScrollView滚动监听，实现美团、大众点评的购买悬浮效果

    转帖请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/17761431),请尊重他人的辛勤劳动成果,谢谢! 我之前写 ...

  7. HTML5 Canvas动画效果演示 - 流浪的鱼 - 博客频道 - CSDN.NET

    HTML5 Canvas动画效果演示 - 流浪的鱼 - 博客频道 - CSDN.NET HTML5 Canvas动画效果演示

  8. HTML5 Canvas动画效果实现原理

    在线演示 使用HTML5画布可以帮助我们高速实现简单的动画效果.基本原理例如以下: 每隔一定时间绘制图形而且清除图形,用来模拟出一个动画过程,能够使用context.clearRect(0, 0, x ...

  9. 如果去掉UITableView上的section的headerView和footerView的悬浮效果

    项目需要cell的间距,又不需要悬浮效果,百度之后找到这个方法,记录一下,备忘. 用UIScrollView的代理方法实现 - (void)scrollViewDidScroll:(UIScrollV ...

随机推荐

  1. 【Python challenge】通关代码及攻略（0-11）

    前言: 最近找到一个有关python的游戏闯关,这是游戏中的思考及通关攻略 最开始位于:http://www.pythonchallenge.com/pc/def/0.html 第0关 题目分析 提示 ...

  2. opt目录

    在linux环境测试时,会部署到/opt目录下,这是为何呢? 下面来详解Linux的/opt目录: /opt:用户级的程序目录 这里主要存放那些可选的程序. 比如,你想部署firefox测试版,那就装 ...

  3. GitHub 热点速览 Vol.11：回暖的 GitHub 迎来上千星的图片流项目

    作者:HelloGitHub-小鱼干 摘要:连着两周成绩平平的 GitHub Trending 榜,终于和三月的天气一样进入全面变暖的模式,无论是本周刚开源搭乘 ocr 热点并获得 1,500+ st ...

  4. ggplot2（2） 从qplot开始入门

    2.1 简介 qplot的意思是快速作图(quick plot). qplot是一种快捷方式,如果您已习惯于使用基础plot(),则可以使用它.它可以使用一致的调用模式快速创建许多不同类型的图. qp ...

  5. LeetCode 136、137、260（只出现一次的数，异或性质及应用）

    First. 陈列一下“异或”的一些性质 异或是一种基于二进制的位运算,用符号XOR或者 ^ 表示,其运算法则是对运算符两侧数的每一个二进制位,同值取0,异值取1. 它与布尔运算的区别在于,当运算符两 ...

  6. 记录一个引用文件所有js文件的方法

    在项目api声明的时候,避免每次添加新的js都要对应去处理 首先我在项目api文件下新建一个files的文件夹,然后再api文件夹下的index.js这样写: var api = {}; const  ...

  7. 从零搭建Spring Cloud Gateway网关（二）—— 打印请求响应日志

    作为网关,日志记录是必不可少的功能,可以在网关出增加requestId来查询整个请求链的调用执行情况等等. 打印请求日志 打印请求日志最重要的就是打印请求参数这些东西,不过RequestBody通常情 ...

  8. linux 配置网卡、远程拷贝文件、建立软硬链接、打包/解包、压缩/解压缩、包操作、yum配置使用、root密码忘记

    目录 一.配置网卡 二.xshell连接 三.远程拷贝文件 四.建立软硬连接 五.打包/解包和压缩/解压缩 六.包操作 七.配置yum源 配置yum源 配置阿里云源 常用命令 yum其他命令 八.重置 ...

  9. Jenkinsfile里定义对象和函数，获取git提交人， 发送钉钉通知

    自从开始使用Jenkinsfile作为Jenkins配置后就一发不可收,因为开发者自定义CI脚本实在太方便了. 比如,最近开发的以一个项目涉及多人,提交冲突挺多的,有的人自己没编译通过就提交了,导致后 ...

  10. MySQL学习(3)

    一 SQL语句 1. 数据库级别(*) 显示全部数据库:show databases; 创建数据库:create database '数据库名字’; 使用数据库:use '数据库名字'; 删除数据库: ...