<!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>七彩泡泡</title>

    <style>

    html,body{

        margin:0;

        padding:0;

        width:100%;

        height:100%;

        overflow: hidden;

    }

    </style>

</head>

<body>

    <canvas id="canvas"></canvas>

    <script>

window.requestAnimFrame = (function(){

  return  window.requestAnimationFrame       ||

          window.webkitRequestAnimationFrame ||

          window.mozRequestAnimationFrame    ||

          window.oRequestAnimationFrame      ||

          window.msRequestAnimationFrame     ||

          function( callback ){

            window.setTimeout(callback, 1000 / 20);

          };

})();

    var mycanvas=document.getElementById("canvas");

    var ctx=mycanvas.getContext("2d");

    var W=window.innerWidth, H=window.innerHeight;

    mycanvas.width=W;

    mycanvas.height=H;

    var paintCanvas=function(){

        ctx.fillStyle="rgba(0,0,0,1)";

        //ctx.clearRect(0,0,W,H);

        ctx.fillRect(0,0,W,H);

    }

    var particleCount=200,

        particles=[];

    function Particle(){

        this.x=Math.random()*W;

        this.y=Math.random()*H;

        this.vx=-1+Math.random()*2;

        this.vy=-1+Math.random()*2;

        this.radius=Math.random()*20;

        this.color="rgba("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+",1)"; //随机颜色

        this.draw=function(){

            ctx.fillStyle=this.color;

            ctx.beginPath();

            ctx.arc(this.x,this.y,this.radius,0,Math.PI*2);

            ctx.fill();

        }

    }

    for(var i=0; i<particleCount;i++){

        particles.push(new Particle())

    }

    function draw() {

    paintCanvas();

    for (var i = 0; i < particles.length; i++) {

        p = particles[i];

        p.draw();

    }

    update();

}

function update() {

    for (var i = 0; i < particles.length; i++) {

        p = particles[i];

        p.x += p.vx;

        p.y += p.vy;

        if(p.x + p.radius > W)

            p.x = p.radius;

        else if(p.x - p.radius < 0) {

            p.x = W - p.radius;

        }

        if(p.y + p.radius > H)

            p.y = p.radius;

        else if(p.y - p.radius < 0) {

            p.y = H - p.radius;

        }

    }

}

function animloop() {

    draw();

    requestAnimFrame(animloop);

}

animloop();

    </script>

</body>

</html>

canvas最简单的多粒子运动，可以更改圆形的大小，密度，运动速度，颜色等；

canvas梦幻七彩泡泡的更多相关文章

  1. HTML5 Canvas 梦幻的文字飞扬动画教程

    之前为大家介绍了一款HTML5/CSS3 3D文字特效 文字外翻效果.今天为大家带来的是html5 canvas实现的文字漂动动画效果.画面非常梦幻. 在线预览   源码下载 实现代码如下: html ...

  2. Canvas 实现七彩喷泉

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. 16个富有创意的HTML5 Canvas动画特效集合

    HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

  4. 16个非常有趣的HTML5 Canvas动画特效集合

    HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

  5. html5 canvas实现梦幻的3D刺猬球

    今天要为大家带来一款html5 canvas实现的梦幻的3D刺猬球.页面非常梦幻.效果图如下: 在线预览   源码下载 html代码: <div> <canvas width=&qu ...

  6. 使用Canvas绘制背景图

    原文  http://www.imququ.com/post/use-canvas-as-background-image.html 最近iCloud Web的Beta版换了UI,整体风格变得和iOS ...

  7. Silverlight 雷达图和一种特殊泡泡画法

    原文:Silverlight 雷达图和一种特殊泡泡画法 自上次发了雷达图,也没怎么说一下. 这次又做了一种图,继续共享一下,就是以一个点为中心,周围绕着几个点,用一个箭头与中心相连并带有某些信息.圆 ...

  8. 新手自定义view练习实例之（一） 泡泡弹窗

    转载请注明出处:http://blog.csdn.net/wingichoy/article/details/50455412 本系列是为新手准备的自定义view练习项目(大牛请无视),相信在学习过程 ...

  9. Android为TV端助力 转载：Android绘图Canvas十八般武器之Shader详解及实战篇(下)

    LinearGradient 线性渐变渲染器 LinearGradient中文翻译过来就是线性渐变的意思.线性渐变通俗来讲就是给起点设置一个颜色值如#faf84d,终点设置一个颜色值如#CC423C, ...

随机推荐

  1. [SDOI2015][bzoj 3994][Luogu P3327] 约数个数和 (莫比乌斯反演)

    题目描述 设d(x)d(x)d(x)为xxx的约数个数,给定NNN.MMM,求 ∑i=1N∑j=1Md(ij)\sum^{N}_{i=1}\sum^{M}_{j=1} d(ij)i=1∑N​j=1∑M ...

  2. UVALive-7040-Color（容斥原理）

    链接: https://vjudge.net/problem/UVALive-7040 题意: Recently, Mr. Big recieved n owers from his fans. He ...

  3. docker学习（六） Docker命令查询

    Docker命令查询 1.基本语法docker [OPTIONS] COMMAND [arg...]一般来说,Docker 命令可以用来管理 daemon,或者通过 CLI 命令管理镜像和容器.可以通 ...

  4. 简要概述java内存模型，以及volatile关键字

    如果我们要想深入了解Java并发编程,就要先理解好Java内存模型.Java内存模型定义了多线程之间共享变量的可见性以及如何在需要的时候对共享变量进行同步.原始的Java内存模型效率并不是很理想,因此 ...

  5. 脚本put数据到hdfs

    1.vim putdata.sh 脚本功能: 每小时的第15分钟把上一小时的数据put到hdfs相应目录 为了避免大量的小文件,我们把文件夹下的文件cat到一个临时文件里,put成功后删除这个临时文件 ...

  6. greenplum(postgresql) 数据字典

    greenplum是基于postgresql开发的分布式数据库,里面大部分的数据字典是一样的.我们在维护gp的时候对gp的数据字典比较熟悉,特此分享给大家.在这里不会详细介绍每个字典的内容,只会介绍常 ...

  7. ibm 汇编

    https://www.ibm.com/developerworks/cn/linux/l-assembly/index.html https://72k.us/file/4031001-328073 ...

  8. 小程序弹出toast,怎么优化代码

    因为toast是会重复调的,所以可以直接写在app里面 在所有的子页面去调这个就好了. 如果是设的none那就是 设置的 就是

  9. Entity Framework 一个表多个外键关联另外一张表的相同主键

    一. 报错 异常:System.Data.Entity.Infrastructure.DbUpdateException: 更新条目时出错.有关详细信息,请参阅内部异常. ---> System ...

  10. PyMouse、PyKeyboard用python操作鼠标和键盘

    1.PyUserInput 简介 PyUserInput是一个使用python的跨平台的操作鼠标和键盘的模块,非常方便使用.支持的平台及依赖如下: Linux - Xlib Mac - Quartz, ...