<!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. Vue指令的钩子函数使用方法

    在Vue 中可以把一系列复杂的操作包装为一个指令. 什么是复杂的操作? 我的理解是:复杂逻辑功能的包装.违背数据驱动的 DOM 操作以及对一些 Hack 手段的掩盖等.我们总是期望以操作数据的形式来实 ...

  2. Luogu4887 第十四分块(前体)

    sto \(lxl\) orz 考虑莫队,每次移动端点,我们都要询问区间内和当前数字异或有 \(k\) 个 \(1\) 的数字个数 询问 \([l,r]\) 可以再次离线,拆成询问 \([1,l-1] ...

  3. 【Win32】对指定进程进行禁音

    使用例子如下: CAudioMgr AudioMgr; AudioMgr.SetProcessMute(GetCurrentProcessId()); H文件的内容如下: #pragma once # ...

  4. PHP匿名函数(闭包)

    匿名函数(Anonymous functions),也叫闭包函数(closures),允许 临时创建一个没有指定名称的函数.最经常用作回调函数(callback)参数的值.当然,也有其它应用的情况. ...

  5. vue知识点之day5

    vuex是解决多层父子关系传值的问题,减少了传值的复杂度 vue+webpack安装图示

  6. PHP中的trait方法冲突

    laravel使用中我们可能需要对User model使用softdelete这个功能,以便删除后还可以恢复,不幸的是entrust模块也有这个方法,两者产生冲突, 解决办法: https://lar ...

  7. Python学习---面向对象的学习[深入]

    类的深入学习    a. Python中一切事物都是对象     b. class Foo:             pass                obj = Foo()         # ...

  8. 【MyBatis】MyBatis实现CRUD操作

    1.实现基本CRUD功能 使用MyBatis对数据完整的操作,也就是CRUD功能的实现.根据之前的内容,要想实现CRUD,只需要进行映射文件的配置. 范例:修改EmpMapper.xml文件,实现CR ...

  9. 对1001. A+B Format (20)的描述

    Github仓库的链接 https://github.com/deepYY/object-oriented/blob/master/A-B-Format/A.B.Format.c 解题思路: 输入a, ...

  10. 021.3 IO流——字节流-FileInputStream读取字节

    内容:文件读取方法,读取方法例子,read(buf)方法中buf的取值,字节流缓冲区对象—提高读取速度/// 文件读取方法:fis.read(),fis.read(buf),具体看例子 例子:文件读取 ...