<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <style>

         /* #cs {

             border: 1px solid rebeccapurple;

         } */

     </style>

 </head>

 <body>

     <canvas id="cs" width="1200" height="600"></canvas>

     <script>

         window.onload = function () {

             let cs = document.getElementById('cs');

             let ab = cs.getContext('2d');

             function random(min, max) {

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

             }

             class Bubble {

                 constructor() {

                     this.x = random(50, 950);

                     this.y = random(50, 550);

                     this.r = 50;

                     this.color = `rgb(${random(0,255)},${random(0,255)},${random(0,255)})`;

                     this.scale = 1;//放大缩小的比列

                     this.direct = 1;//放大缩小的方向

                     this.step = random(1, 10) / 500;//放大缩小的速率

                 }

                 draw() {

                     if (this.scale < 0) {

                         this.direct = 1;

                     } else if (this.scale > 1) {

                         this.direct = -1;

                     }

                     this.scale += this.step * this.direct;

                     ab.save();//保存转换状态

                     ab.beginPath();//一个新的路径

                     ab.translate(this.x, this.y);

                     ab.scale(this.scale, this.scale);//开始放大缩小

                     ab.arc(0, 0, this.r, 0, 2 * Math.PI);

                     ab.fillStyle = this.color;//背景颜色

                     ab.globalAlpha = this.scale;//透明

                     ab.fill();

                     ab.restore();//恢复画布原点

                 }

             }

            let arr=[];//创建空数组

            for(let i=0;i<50;i++){

                arr.push(new Bubble());//添加数组

            }

            setInterval(function(){

                ab.clearRect(0,0,1000,600);//清除之前的内容

                 for(let bum of arr){//遍历数组

                     bum.draw();

                 }

            },50)

         }

     </script>

 </body>

 </html>

用JavaScript编写气泡的更多相关文章

  1. artDialog是一个基于javascript编写的对话框组件，它拥有精致的界面与友好的接口

    artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口 自适应内容 artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适应 ...

  2. 用Javascript编写Chrome浏览器插件

    原文:http://homepage.yesky.com/62/11206062.shtml 用Javascript编写Chrome浏览器插件 2010-04-12 07:30 来源:天极网软件频道 ...

  3. javascript 编写的贪吃蛇

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. three.js是JavaScript编写的WebGL第 三方库

    three.js是JavaScript编写的WebGL第 三方库.提供了非常多的3D显示功能.Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机.光影.材质 ...

  5. JavaScript编写了一个计时器

    初学JavaScript,用JavaScript编写了一个计时器. 设计思想: 1.借助于Date()对象,来不断获取时间点: 2.然后用两次时间点的毫秒数相减,算出时间差: 3.累加时间差,这样就能 ...

  6. javascript编写一个简单的编译器(理解抽象语法树AST)

    javascript编写一个简单的编译器(理解抽象语法树AST) 编译器 是一种接收一段代码,然后把它转成一些其他一种机制.我们现在来做一个在一张纸上画出一条线,那么我们画出一条线需要定义的条件如下: ...

  7. canvas ：原生javascript编写动态时钟

    canvas :原生javascript编写动态时钟     此时针是以画布的中心为圆心: g.translate(width/2,width/2); 此函数是将画布的原点移到(width/2,wid ...

  8. JavaScript学习总结(十四)——JavaScript编写类的扩展方法

    在​J​a​v​a​S​c​r​i​p​t​中​可以使​用​类的p​r​o​t​o​t​y​p​e属性来​扩​展​类的属​性​和​方​法,在实际开发当中,当JavaScript内置的那些类所提供的动态 ...

  9. JavaScript学习总结(十二)——JavaScript编写类

    在工作中经常用到JavaScript,今天总结一下JavaScript编写类的几种写法以及这几种写法的优缺点,关于JavaScript编写类的方式,在网上看到很多,而且每个人的写法都不太一样,经常看到 ...

随机推荐

  1. sql:MySql create FUNCTION,VIEW,PROCEDURE

    use geovindu; #函数 DELIMITER $$ drop function if exists f_GetDepartmentName $$ CREATE function f_GetD ...

  2. BZOJ3512：DZY Loves Math IV

    传送门 Sol 好神仙的题目.. 一开始就直接莫比乌斯反演然后就 \(GG\) 了 orz 题解 permui 枚举 \(n\),就是求 \(\sum_{i=1}^{n}S(i,m)\) 其中\(S( ...

  3. bzoj一句话题解

    发现好多人都在搞这个...本人也想来试试(Solved刚到70就搞这个靠不靠谱啊喂).会更新的.嗯. 1000-1029 1000 A+B problem (这个还需要一句话吗?). 1001 狼抓兔 ...

  4. MyEclipse去除网上复制下来的代码带有的行号（使用正则表达式）

    一.正则表达式去除代码行号 作为开发人员,我们经常从网上复制一些代码,有些时候复制的代码前面是带有行号,如: MyEclipse本身自带有查找替换功能,并且支持正则表达式替换,使用正则替换就可以很容易 ...

  5. 【element+vue后台页面】Vue-element-admin

    https://segmentfault.com/a/1190000009275424

  6. 微信小程序开发11-HTTPS网络通信（重点）

    1.OneNET平台支持https,将HTTP头部改成https://api.heclouds.com即可(重点!!!!!!!!) 2.如果我们需要从 https://test.com/getinfo ...

  7. 用ISA2006配置单网卡缓存服务器

    有些公司在部署ISA服务器之前已经有了自己的网络访问解决方案,例如通过硬件防火墙访问互联网,如果这种网络访问解决方案运行效果较好,公司就未必希望用ISA来替代当前的方案,毕竟稳定是第一位的.但在这种情 ...

  8. vs安装部署“必备”组件里面正常情况没有出现office2010 PIA组件

    vs安装部署“必备”组件里面正常情况没有出现office2010 pia组件时,将 Office2010PIARedist 文件夹放在C:\Program Files\Microsoft SDKs\W ...

  9. Linux下的Mysql的远程访问

    mysql的服务端[192.168.25.136] 1,在远程访问之前需先配置防火墙 service iptables stop (不推荐,可配置开通3306端口) 2,授权 mysql> gr ...

  10. Linux iptables命令详解

    iptables命令主要是设置防火墙信息的 常见命令参数 Usage: iptables -[AD] chain rule-specification [options] iptables -I ch ...