<!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. docker学习（六） Docker命令查询

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

  2. GeoJSON与GeoBuf互相转换

    GeoJSON格式通常比较大,网页需要较长时间加载,可以使用GeoBuf进行压缩. 使用GeoBuf有很多好处:结构紧凑.文件小.方便编码和解码.能适用各种GeoJSON等等. 使用: 1.安装 ge ...

  3. loj #2316

    最短路 + 记忆化 记忆化搜索更容易实现 #include <iostream> #include <cstdio> #include <algorithm> #i ...

  4. [APIO2012]派遣 左偏树

    P1552 [APIO2012]派遣 题面 考虑枚举每个节点作为管理者,计算所获得的满意程度以更新答案.对于每个节点的计算,贪心,维护一个大根堆,每次弹出薪水最大的人.这里注意,一旦一个人被弹出,那么 ...

  5. angular2-cli 安装

    1.如果你之前安装失败过,最好在安装angular-cli之前先卸载干净,用以下两句: npm uninstall -g angular-cli npm cache clean  2.设置淘宝镜像,国 ...

  6. iptables一些练习

    iptables 一些小练习 可以参考之前的一起食用 https://www.cnblogs.com/lovesKey/p/10909633.html 允许来自192.168.0.0/16网段的地址来 ...

  7. 幽默的讲解六种Socket I/O模型

    很幽默的讲解六种Socket I/O模型 本文简单介绍了当前Windows支持的各种Socket I/O模型,如果你发现其中存在什么错误请务必赐教. 一:select模型 二:WSAAsyncSele ...

  8. 为http请求追加cookie值

    1.html中引入JQuery Cookie插件. 2.JS var expiresTime = new Date(); expiresTime.setTime(expiresTime.getTime ...

  9. C++标准库分析总结(一)

    之前学习过标准库,最近身边有人问到相关话题,故在此做一个总结 1 标准库介绍 C++标准库:C++ Standard Library C++标准模板库:Standard Template Librar ...

  10. CentOS7 升级Python2.x到3.x

    CentOS 7 中默认安装了 Python,版本比较低(2.7.5),为了使用新版 3.x,需要对旧版本进行升级.由于很多基本的命令.软件包都依赖旧版本,比如:yum.所以,在更新 Python 时 ...