<!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. 01.JavaScript-->js组成

  2. Java设计模式—桥梁模式

    终于又碰到了一个简单点的模式了. 桥梁模式也叫做桥接模式,定义如下:                将抽象和实现解耦,使得两者可以独立地变化. 这句话也太难理解了,桥梁模式是为了解决类继承的缺点而设计 ...

  3. 远景GIS云上线

    没有发布会.没有嘉宾.没有掌声,趁着国庆假期悄悄地将系统部署到服务器上线运行. 远景GIS云(RGIS Cloud)基于自主研发的远景GIS基础平台开发,目前已实现了Shape上传和导出.符号配置.动 ...

  4. The pit of an if statement in Java

    package the.pit.of.an.ifstatement.injava; public class ThePitOfAnIfStatementInJava { public static v ...

  5. 理解android中ListFragment和Loader

    一直以来不知Android中Loader怎么用,今天晚上特意花了时间来研究,算是基本上搞明白了,现在把相关的注释和代码发出来,以便笔记和给网友一个参考,错误之处还望大家给我留言,共同进步,这个例子采用 ...

  6. 客户端和服务端如何使用Token和Session

    一.我们先解释一下他的含义:    1.Token的引入:Token是在客户端频繁向服务端请求数据,服务端频繁的去数据库查询用户名和密码并进行对比,判断用户名和密码正确与否,并作出相应提示,在这样的背 ...

  7. Python 生成器总结

    生成器的概念: 生成器不会把结果保存在一个系列中,而是保存在生成器的状态,在每次进行迭代时返回一个值,直到遇到StopIteration异常结束 生成器是这样一个函数,它记住上一次返回时在函数体中的位 ...

  8. ASP.NET Page执行顺序如：OnPreInit()、OnInit()……

    using System;using System.Data;using System.Configuration;using System.Web;using System.Web.Security ...

  9. DOM介绍

    什么是DOM DOM:文档对象模型.DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构.目的其实就是为了能让js操作html元素而制定的一个规范. DOM就是由节点组成的. 解析过程 ...

  10. Fiori Fundamentals和SAP UI5 Web Components

    这周有位同事邀请我给团队讲一讲SAP技术的演进历史,所以我准备了下面几个主题来介绍. 其中SAP的技术回顾和演进,我的思路就是从前后台两方面分别介绍. 我画了一张非常简单的图: 去年5月我写过一篇文章 ...