思路：使用Math.random()函数绘制是个不同位置，大小，颜色的圆形，然后设置定时器，前一个状态用一个与画布相同颜色的背景图片进行覆盖，改变圆形的位置，每次改变都是在这张空白的背景图片上面重新进行重新绘制的过程

源码：

<!doctype html>
<html>
<head>
    <title>test</title>
    <meta charset="UTF-8">
</head>
<body>
<canvas id="canvas" Style="border:solid black thin" width="600px" height="500px"></canvas>
<script>
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext('2d');
    const WIDTH = canvas.width;
    const HEIGHT = canvas.height;
    var img = new Image();
    img.src = "white.png";
    var rangeX=[];//用来存储生成的十组x坐标//这里的气泡属性用一个对象来进行封装，再将对象存储在数组中更恰当
    var rangeY=[];//用来存储生成的十组y坐标
    var rangeR=[];//用来存储生成的十足气泡的半径
    var red=[];//用来存储红色的数值
    var green=[];//用来存储绿色的数值
    var blue=[];//用来存储蓝色的数值
    for( var i=0;i<20;i++){//事先生成十组气泡的x坐标和半径
        var r = Math.random() * 50;
        var x = WIDTH * Math.random();
        if (x < r) {
            x = r;
        }
        if (x > WIDTH - r) {
            x = WIDTH - r;
        }
        var y = WIDTH * Math.random();
        if (y < r) {
            y = r;
        }
        if (y > WIDTH - r) {
            y = WIDTH - r;
        }
        rangeX[i]=x;
        rangeR[i]=r;
        rangeY[i]=y;
        red[i]=Math.random()*255;
        green[i]=Math.random()*255;
        blue[i]=Math.random()*255;
    }
    var algha=0.3;
    var tag=1;//设一个标记，标记气泡是在往下走还是往上走，往下是1，往上是0
    var setinterval = setInterval(function () {
        context.beginPath();
        context.drawImage(img, 0, 0);
        for (var i = 0; i < 20; i++) {
            var randomX=Math.random()*3;
            var randomY=Math.random()*3;
            if(tag===1){
                if (rangeX[i]+rangeR[i] >= WIDTH && rangeY[i]+rangeR[i] >= HEIGHT) {
                    tag=0;
                }
                context.beginPath();
                rangeX[i]=rangeX[i]+randomX;
                rangeY[i]=rangeY[i]+randomY;
                context.arc(rangeX[i], rangeY[i], rangeR[i], 0, Math.PI * 2, false);
                context.fillStyle = "rgba("+red[i]+","+green[i]+","+blue[i]+","+algha+")";
                context.fill();
            } else{
                if (rangeX[i]-rangeR[i] <=0 && rangeY[i]-rangeR[i] <=0) {
                    tag=1;
                }
                context.beginPath();
                rangeX[i]=rangeX[i]-randomX;
                rangeY[i]=rangeY[i]-randomY;
                context.arc(rangeX[i], rangeY[i], rangeR[i], 0, Math.PI * 2, false);
                context.fillStyle = "rgba("+red[i]+","+green[i]+","+blue[i]+","+algha+")";
                context.fill();
            }

        }
        context.closePath();
    }, 100);

</script>
</body>
</html>
效果图：

缺陷：

气泡移动的路径算法处理的不是很恰当

												


											
canvas绘制气泡的更多相关文章
	

    
								
  1. java-js知识库之二——canvas绘制炫彩气泡
		
    现在使用canvas绘制气泡,虽说很多人都已经实现过了,可能方法都大同小异,但自己写和看别人写完全是两码事,自己会写的才是自己的,话不多说,直接上代码. 先来一张效果图: 现在上代码,代码有详细的注释 ...
    
		
    2. 
						
  2. HTML5学习总结——canvas绘制象棋(canvas绘图)
		
    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...
    
		
    3. 
						
  3. 用canvas绘制折线图
		
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
		
    4. 
						
  4. 封装 用canvas绘制直线的函数--面向对象
		
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
		
    5. 
						
  5. 学习笔记：HTML5 Canvas绘制简单图形
		
    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
    
		
    6. 
						
  6. canvas绘制经典折线图(一)
		
    最终效果图如下: 实现步骤如下:注-引用了jQuery HTML代码 <!doctype html> <html lang="en"> <head&g ...
    
		
    7. 
						
  7. Canvas绘制图形
		
    1.Canvas绘制一个蓝色的矩形 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...
    
		
    8. 
						
  8. [canvas]利用canvas绘制自适应的折线图
		
    前段时间学习了用canvas绘制折现图,且当画布变换大小,折现图会随之变化,现附上代码 <!DOCTYPE html> <html lang="en"> & ...
    
		
    9. 
						
  9. 使用Canvas绘制背景图
		
    原文  http://www.imququ.com/post/use-canvas-as-background-image.html 最近iCloud Web的Beta版换了UI,整体风格变得和iOS ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 2018 vue前端面试题
			
    1.active-class是哪个组件的属性?嵌套路由怎么定义?答:vue-router模块的router-link组件. 2.怎么定义vue-router的动态路由?怎么获取传过来的动态参数? 答: ...
    
			
    2. 
						
  2. Floodlight1.2+Mininet的安装及使用
			
    直接转载的大神的,亲测Ubuntu16.04版本没问题 https://www.sdnlab.com/19189.html
    
			
    3. 
						
  3. Unity Shader 矩阵基本信息
			
    基本信息 mul函数 mul函数,是表示矩阵M和向量V进行点乘,得到一个向量Z,这个向量Z就是对向量V进行矩阵变换后得到的值.  HLSL的mul函数接受mul(V, M)或mul(M, V),要注意 ...
    
			
    4. 
						
  4. nodeppt：网页版 PPT
			
    资料 网址 github https://github.com/ksky521/nodeppt 网页版PPT(nodeppt 的介绍) http://deliazhi.com/2017/03/31/W ...
    
			
    5. 
						
  5. 18.2 of的函数集中的of是Open Firmware的缩写
			
    内核中操作dtb的一套函数都是of开头,这个of是open firmware.dts的方法来源于open Firmware On Sun SPARC systems, the Open Firmwar ...
    
			
    6. 
						
  6. 关于set_input_delay的用法分析
			
    关于set_input_delay的用法分析 数据分为了系统同步和源同步: 对于下降沿采集数据的情况,当下降沿时钟延迟dv_afe到达无效数据最左端时,图中1位置,为最小延时,即采集不到有效数据的临界 ...
    
			
    7. 
						
  7. Excel技巧--分隔工资条
			
    要将上图的工资表,做成每行都带标题而且有空行间隔的工资条,可以这么做: 1.表格右侧添加一列数据列:输入1,2,选定,并双击单元格右下角形成一升序数字列: 2.再将该列复制,粘贴到该列末尾: 3.点一 ...
    
			
    8. 
						
  8. Azure SQL 数据库仓库Data Warehouse (4) 2018 TechSummit 动手实验营
			
    <Windows Azure Platform 系列文章目录> 上传一下之前在2018 TechSummit的动手实验营:Azure数据仓库PaaS项目架构规划与实战入门 包含PPT和Wo ...
    
			
    9. 
						
  9. 把java程序作为windows服务运行
			
    参考: https://www.jianshu.com/p/fc9e4ea61e13 https://blog.csdn.net/qq_28566071/article/details/8088250 ...
    
			
    10. 
						
  10. [蓝桥杯]ALGO-181.算法训练_According to Bartjens
			
    问题描述 计算器和计算机的大量普及也有其弊端.即便是受过专业技术训练的学生们也很可能缺乏计算能力.由于电脑的大量使用,很多人无法心算出7*8这样的算式,甚至是用纸和笔也算不出13*.不过谁在意呢? B ...
    
			
    11.