<html>

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<meta name="viewport" content="width=device-width, initial-scale=1">

	<style>

	   #canvas{

	   background:#000;

	   }

	</style>

</head>

<body>

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

</body>

</html>

<script>

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

        var ctx = canvas.getContext('2d');

        var WHeight=document.body.offsetHeight;

        var WWidth=document.body.offsetWidth ;

        canvas.width=WWidth;

        canvas.height=WHeight;

        var Number=1200;  //控制粒子的个数

        var Data=[];

        Dataarc() //多个圆

        function  Dataarc()

        {

         for(var i=0;i<Number;i++)

           {

               Data[i]={

                   x:~~(Math.random()*WWidth),

                   y:~~(Math.random()*WHeight),

                   px:Math.random()*2,

                   py: Math.random()*2

               }

               console.log(Data);

             arc(Data[i].x, Data[i].y);

           }

        }

        function  arc(x,y)   //画圆

        {

          ctx.save();

          ctx.beginPath();

          ctx.fillStyle="#fff";//填充颜色,默认是黑色

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

          ctx.fill();

          ctx.stroke();

        }

        function line(x1,y1,x2,y2)  //连线的线段

        {

           ctx.save();

           var linear=ctx.createLinearGradient(x1,y1,x2,y2);

           linear.addColorStop( 0, 'red' );

           linear.addColorStop( 1, 'blue' );

           ctx.lineWidth=1.5;

           ctx.strokeStyle = linear;

            ctx.beginPath();

            ctx.moveTo(x1, y1);

            ctx.closePath();

            ctx.lineTo(x2, y2);

            ctx.stroke();

           ctx.restore();

        }

        function Motion()  //控制粒子的运动和判断连线条件

        {

         ctx.clearRect(0,0,WWidth,WHeight);

         if(Data!="")

          {

            for(var i=0;i<Number;i++)

            {

              if(Data[i].x<=0 ||Data[i].x>=WWidth)

              {

                 Data[i].px=-Data[i].px;

              }

              if( Data[i].y>=WHeight||Data[i].y<=0)

              {

                 Data[i].py=-Data[i].py;

              }

                Data[i].x=~~(Data[i].x)-~~(Data[i].px);

                    Data[i].y=~~(Data[i].y)+~~(Data[i].py);

                            arc(Data[i].x, Data[i].y);

                for(var j=i+1;j<Number;j++)

                {

                  if(Math.pow(Data[i].x-

                                  Data[j].x,2)+Math.pow(Data[i].y-Data[j].y,2<2000)

                  {

                        line(Data[i].x,Data[i].y,Data[j].x,Data[j].y);

                  }

                }

            }

           }

        }

        setInterval("Motion()","200");   //定时调用，让粒子运动

    </script>

　　　　在写下合格粒子运动时要先清楚你的思路，不能一开始就盲目的开始写，首先先要确定思路然后在去一步步的实现，在写的过程要注意细节，要思考js有些知识是跟数学知识相关的要注意观察

1要创建一个画布

2要创建粒子

3让粒子能够运动起来

粒子运动不是粒子真正的在动，而是不断的重画

3判断粒子勾成连线的条件(用勾股定理)

js用canvans 实现简单的粒子运动的更多相关文章

  1. JS基础（超级简单）

    1     JS基础(超级简单) 1.1 数据类型 1.1.1   基本类型: 1)        Number:特别注意:NaN的检测方法:Nan!=NaN;或者使用isNaN方法 2)       ...

  2. JS去掉首尾空格 简单方法大全(原生正则jquery)

    JS去掉首尾空格 简单方法大全 var osfipin= ' http://www.cnblogs.com/osfipin/ '; //去除首尾空格 osfipin.replace(/(^\s*)|( ...

  3. js实用方法记录-简单cookie操作

    js实用方法记录-简单cookie操作 设置cookie:setCookie(名称,值,保存时间,保存域); 获取cookie:setCookie(名称); 移除cookie:setCookie(名称 ...

  4. sChart.js：一个小型简单的图表库

    介绍 sChart.js 作为一个小型简单的图表库,没有过多的图表类型,只包含了柱状图.折线图.饼状图和环形图四种基本的图表.麻雀虽小,五脏俱全.sChart.js 基本可以满足这四种图表的需求.而它 ...

  5. Nodejs学习笔记（十五）--- Node.js + Koa2 构建网站简单示例

    目录 前言 搭建项目及其它准备工作 创建数据库 创建Koa2项目 安装项目其它需要包 清除冗余文件并重新规划项目目录 配置文件 规划示例路由,并新建相关文件 实现数据访问和业务逻辑相关方法 编写mys ...

  6. [转]Nodejs学习笔记（十五）--- Node.js + Koa2 构建网站简单示例

    本文转自:https://www.cnblogs.com/zhongweiv/p/nodejs_koa2_webapp.html 目录 前言 搭建项目及其它准备工作 创建数据库 创建Koa2项目 安装 ...

  7. Nodejs学习笔记（十五）—Node.js + Koa2 构建网站简单示例

    前言 前面一有写到一篇Node.js+Express构建网站简单示例:http://www.cnblogs.com/zhongweiv/p/nodejs_express_webapp.html 这篇还 ...

  8. js中json数据简单处理（JSON.parse()和js中嵌套html）

    js中json数据简单处理(JSON.parse()和js中嵌套html) 一.总结 1.html中嵌套js:<script>js代码</script> 2.js中嵌套html ...

  9. Node.js 环境搭建及简单应用

    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型.如果你想创建自己的服务,那么Node.js是一个非 ...

随机推荐

  1. OO第二单元作业小结

    前言 转眼已是第九周,第二单元的电梯系列作业已经结束,终于体验了一番多线程电梯之旅. 第一次作业是单电梯的傻瓜调度,虽然是第一次写多线程,但在课程PPT的指引下,写起来还是非常容易:第二次作业是单电梯 ...

  2. [转]POJ1006: 中国剩余定理的完美演绎

    Biorhythms Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 117973   Accepted: 37026 Des ...

  3. Android 个人手机通讯录开发

    一.Android 个人手机通讯录开发 数据存储:SQLite 数据库 开发工具:Android Studio 二.Phone Module 简介 1. 界面展示                2. ...

  4. github 进阶说明

    目录 github 进阶说明 前言 三个目录树 重置 git reset 增加路径的reset 检出 checkout 带路径的checkout 仓库 数据对象 其他 资料 github 进阶说明 前 ...

  5. Java面试题：Java中怎么样实现多线程

    方法一:继承 Thread 类,覆盖方法 run(),我们在创建的 Thread 类的子类中重写 run() ,加入线程所要执行的代码即可. 下面是一个例子: public class MyThrea ...

  6. 八问WebSocket协议：为你快速解答WebSocket热门疑问

    一.引言 WebSocket是一种比较新的协议,它是伴随着html5规范而生的,虽然还比较年轻,但大多主流浏览器都已经支持.它使用方面.应用广泛,已经渗透到前后端开发的各种场景中. 对http一问一答 ...

  7. Docker & ASP.NET Core (5)：Docker Compose

    第一篇:把代码连接到容器 第二篇:定制Docker镜像 第三篇:发布镜像 第四篇:容器间的连接 Docker Compose简介 Compose是一个用来定义和运行多容器Docker应用的工具.使用C ...

  8. [.NET跨平台]Jexus独立版本的便利与过程中的一些坑

    本文环境与前言 之前写过一篇相关的文章:在.NET Core之前,实现.Net跨平台之Mono+CentOS+Jexus初体验 当时的部署还是比较繁琐的,而且需要联网下载各种东西..有兴趣的可以看看, ...

  9. Vuex，状态管理模式

    对于 Vue 本人目前接触不深,只得浅层分析,Vue 是单向数据流, state,驱动应用的数据源: view,以声明方式将 state 映射到视图: actions,响应在 view 上的用户输入导 ...

  10. 【Netty】(6) ---源码ServerBootstrap

    [Netty]6 ---源码ServerBootstrap 之前写了两篇与Bootstrap相关的文章,一篇是ServerBootstrap的父类,一篇是客户端Bootstrap类,博客地址: [Ne ...