<!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. python 高阶函数之filter

    前文说到python高阶函数之map,相信大家对python中的高阶函数有所了解,此次继续分享python中的另一个高阶函数filter. 先看一下filter() 函数签名 >>> ...

  2. 对linux下日志文件error监控

    对日志文件中的error进行监控,当日志文件中出现error关键字时,就截取日志(grep -i error 不区分大小写进行搜索"error"关键字,但是会将包含error大小写 ...

  3. 使用jQuery快速高效制作网页交互特效第一章JavaScript基础

    JavaScript 一.JavaScript概念: JavaScript面向对象事件驱动具有安全性的脚本语言,面向对象 JavaScript特点: 1.解释性语言,边运行边解释 2.和HTML页面实 ...

  4. SIGAI机器学习第十五集 支持向量机2

    讲授线性分类器,分类间隔,线性可分的支持向量机原问题与对偶问题,线性不可分的支持向量机原问题与对偶问题,核映射与核函数,多分类问题,libsvm的使用,实际应用 大纲: SVM求解面临的问题 SMO算 ...

  5. mybatis-传多个参数

    第一种方案:下标传参 DAO层的函数方法 Public User selectUser(String name, String area); 对应的Mapper.xml <select id=& ...

  6. luogu 5505 [JSOI2011]分特产 广义容斥

    共有 $m$ 种物品,每个物品 $a[i]$ 个,分给 $n$ 个人,每个人至少要拿到一件,求方案数. 令 $f[i]$ 表示钦定 $i$ 个没分到特产,其余 $(n-i)$ 个人随便选的方案数,$g ...

  7. parted分区命令

    Parted是一个比fdisk更高级的工具,它支持多种分区表格式,包括MS-DOS和GPT.它允许用户创建,删除,调整大小,缩小,移动和复制分区,重新组织磁盘使用,以及将数据复制到新硬盘,但在缩小分区 ...

  8. 为List<T>中的T进行参数校验

    1.现在前端发送了一个POST请求,他的Data是一个数组,而不是对象(jsonObj的值两侧是中括号). var jsonObj = [{'id':11, 'name':'叵'}, {'id':12 ...

  9. python学习：模块（第一节）

    1.什么是模块? 如果你从 Python 解释器退出再进入,那么你定义的所有的方法和变量就都消失了.为此 Python 提供了一个办法,把这些定义存放在文件中,为一些脚本或者交互式的解释器实例使用,这 ...

  10. vue实现element-ui对话框可拖拽功能

    element-ui对话框可拖拽及边界处理 应业务需求,需要实现对话框可拖拽问题,应element-ui没有提供官方支持,于是便参考大神的文章,得出了适合业务需要的解决方案.很多大神给出的代码是没有解 ...