<!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. <Android 基础（二十一）> Android 屏幕适配

    基本概念 1. 什么是屏幕尺寸.屏幕分辨率.屏幕像素密度? 屏幕尺寸是指屏幕对角线的长度.单位是英寸,1英寸=2.54厘米 屏幕分辨率是指在横纵向上的像素点数,单位是px,1px=1像素点,一般是纵向 ...

  2. MySQL数据库(7)----数据库的选择、创建、删除和更改

    1.选择数据库 使用 USE 语句可以选择数据库,并把它指定为MySQL服务器连接的默认(当前)数据库: USE db_name; 要想选择数据库,用户必须要具备相应的访问权限:否则,会出现错误提示. ...

  3. jpa dialect设置

    1.如果配置文件格式为application.properties,在配置文件中添加以下代码即可: spring.jpa.database-platform=org.hibernate.dialect ...

  4. ZABBIX 2.1.0 发布，分布式系统监控

    ZABBIX 2.1.0 发布了,这相当是 ZABBIX 2.2 的首个 Alpha 版本,包括了新的主要的功能和改进. 主要包括如下几个方面的提升: 性能提升 可加载模块 移除对未知事件的支持 应用 ...

  5. Datatables跳转到指定页

    因为项目用到Datatables发现在分页特别多时无法跳转到指定页,自己动手增加了#Datatables 跳转到指定页#功能,实现代码如下: table = $('#user-table').data ...

  6. 购物车redis存储结构

  7. FDFDF

    Linux(Centos)之安装Nginx及注意事项   1.Nginx的简单说明 a.  Nginx是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器,期初开发的目的 ...

  8. Java学习---JDK的安装和配置

    控制面板\系统和安全\系统 CLASSPATH %JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar; JAVA_HOME C:\Program Files ...

  9. 阿里云Quick BI——让人人都成为分析师

    在3月29日深圳云栖大会的数据分析与可视化专场中,阿里云产品专家潘炎峰(陌停)对大数据智能分析产品 Quick BI 进行了深入的剖析.大会现场的精彩分享也赢得观众们的一直认可和热烈的反响. Quic ...

  10. 有用的JS函数

    1. QueryString function queryString(key) { var re = new RegExp("[?&]" + key + "=( ...