<!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. POJ-2891-Strange Way to Express Integers（线性同余方程组）

    链接: https://vjudge.net/problem/POJ-2891 题意: Elina is reading a book written by Rujia Liu, which intr ...

  2. 如何下载oracle jdk|oracle jdk下载慢，要登录等等问题

    wget -c --no-cookies --no-check-certificate --header "Cookie: oraclelicense=accept-securebackup ...

  3. vs编译自定义编译任务记录,msbuild

    https://www.cnblogs.com/whitewolf/archive/2011/07/27/2119005.html http://www.cnblogs.com/hjf1223/arc ...

  4. [Dart] Understand Classes and Inheritance in Dart

    We will look at how we can create classes and explore some various features. Dart adopts a single-in ...

  5. Bootstrap 表单布局示例

    <html> <head> <link href="../../dist/css/bootstrap.min.css" rel="style ...

  6. 在mysql中用int类型存储IP

    SELECT INET_ATON( '127.0.0.1' ); SELECT INET_NTOA();

  7. svg创建分支

    是这样的 我之前的项目上传到svn上一直没有开过分支,今天其中的一个项目改动会比较大,想创建一个分支,在此分支上修改(目的是改动如果比较大,不想影响原来主干上的分支) 首先打开我们的项目存放的文件:右 ...

  8. Python操作Jira

    目录 认证 项目(Project) 问题(Issue) 配置域(Fields) 关注者/评论/附件 创建/分配/转换问题 搜索 Jira提供了完善的RESTful API,如果不想直接请求API接口可 ...

  9. (转) hive调优（2）

    hive 调优(二)参数调优汇总 在hive调优(一) 中说了一些常见的调优,但是觉得参数涉及不多,补充如下 1.设置合理solt数 mapred.tasktracker.map.tasks.maxi ...

  10. hive --metastore三种模式

    在官网上对于这几种模式的介绍如下: 按Metastore数据库位置分: 1.本地/嵌入式Metastore数据库(Derby) 2.远程Metastore数据库(其他的关系型数据库,像mysql.or ...