<!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. word 文档刷文字格式

    WORD文档增加的宏文件, 作用:对全文中文字体更改为,DFKai-SB :对英文字母字体更改为,Times New Roman Sub AutoClose() Selection.WholeStor ...

  2. TopCoder14580: EllysRPS

    题意 \(yyb\)要去与\(m\)\((m\le100)\)个人玩游戏 由于\(yyb\)忙着切大火题,他没有太多的精力浪费在游戏上 所以仁慈的\(yyb\)决定放\(m\)个人一条生路,不吊打他们 ...

  3. The difference between a local variable and a member variable

    package com.itheima_04; /* * 成员变量和局部变量的区别: * A:在类中的位置不同 * 成员变量:类中,方法外 * 局部变量:方法中或者方法声明上(形式参数) * B:在内 ...

  4. xise官方网站|XISE官网|xise最新版下载|超级XISE WBMS管理V12.0版本官方网站|

    诠释: 1. 破解VIP登陆限制 2.去后门 (自查) 下载地址 :https://pan.baidu.com/s/1eR2rUOM 查毒地址:http://a.virscan.org/a3983f3 ...

  5. mysql 基础学习2

    1.修改表字段顺序 在 字段增加和修改语法(ADD/CHANGE/MODIFY)中,都有一个可选项first|after column_name,这个选项可以用来修改字段在表中的位置 默认ADD增加的 ...

  6. 错误：该表单无法显示，可能是由于 Microsoft SharePoint Server State Service 配置不当。有关详细信息，请与服务器管理员联系

    问题场景: 1.SharePoint 2013 中工作流需要状态服务(State Service),如果没有正确配置状态服务,则在给列表.文档库添加工作流时会遇到错误: “该表单无法显示,可能是由于 ...

  7. MVC与EF结合：Contoso大学

    中文教程 1.通过 MVC 5 使用 Entity Framework 6 Code First 入门 https://docs.microsoft.com/zh-cn/aspnet/mvc/over ...

  8. C#3.0新特性:隐式类型、扩展方法、自动实现属性，对象/集合初始值设定、匿名类型、Lambda，Linq，表达式树、可选参数与命名参数

    一.隐式类型var 从 Visual C# 3.0 开始,在方法范围中声明的变量可以具有隐式类型var.隐式类型可以替代任何类型,编译器自动推断类型. 1.var类型的局部变量必须赋予初始值,包括匿名 ...

  9. 双十一问题：在洪峰数据来临的瞬间，redis出现连接超时异常

    如图所示,在大数据量来袭时,部署服务的机器中存在一台机器突然出现该报错,并且一直持续下去,直到洪峰数据结束也未恢复,重启机器后该问题解决 原因分析: 在请求redis过多时,因为未及时的释放掉redi ...

  10. 019.2 map集合类

    Map<k,v>Map:双列集合,一次存一对,键值对,类似于python的字典.共性功能:1.添加    v put(key,value)     //返回key的旧值    putAll ...