<!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. Copy Books

    Description Given n books and the i-th book has pages[i] pages. There are k persons to copy these bo ...

  2. SQL:自增主键的获取@@IDENTITY 和 SCOPE_IDENTITY 的区别

    @@IDENTITY 返回当前会话所有作用域的最后一个ID SCOPE_IDENTITY() 返回当前作用域的最后一个ID 返回上面语句执行后产生的自增主键,这个是目前最可靠的方式: insert i ...

  3. Python爬虫：BeautifulSoup用法总结

    原文 BeautifulSoup是一个解析HTML或XML文件的第三方库.HTML或XML文件可以用DOM模型解释.一般包含三种节点: 元素节点 - 通常指HTML 或 XML的标签 文本节点 - 标 ...

  4. Vue IE11 报错 Failed to generate render function:SyntaxError: 缺少标识符 in

    报错截图: 查了篇文章(https://blog.csdn.net/weixin_42018057/article/details/81385121),遇到的情况跟文章里描述的类似,他提供的方法是:需 ...

  5. win32窗口程序分析

    1.分析消息的附加参数 例如:为了查看程序处理了哪些消息   在回调函数中调用输出函数,在控制台中输出消息的值:

  6. 转,sql server update set from inner 批量修改的使用

    SQL update select结合语句详解及应用   QL update select语句 最常用的update语法是: 1 2 UPDATE TABLE_NAME SET column_name ...

  7. eclipse/myeclipse SVN资源库URL中文乱码问题解决办法

    右击选择资源库地址 可以自定义名称

  8. iwap:修改菜单树文件

    1.添加mysql数据库连接的jar包. 2.

  9. 【概率论】5-4:泊松分布(The Poisson Distribution)

    title: [概率论]5-4:泊松分布(The Poisson Distribution) categories: - Mathematic - Probability keywords: - Po ...

  10. Fidller抓包分析post请求

    目的:抓包是为了最近做接口测试做准备,以前没有用过这个工具,最近来学下,但是网上很多文章了,所以不一一记录,有一部分参考即可 1.如何抓取想要的web端或者手机端包,已经有很多文章谢了,推荐的参考文章 ...