<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. GitLab11.3.9 使用 Crowd3.3.2 的帐号实现 SSO 单点登录，以及GitLab配置腾讯企业邮箱

    GitLab11.3.9 的安装方法: 点击查看.   Crowd3.3.2 的安装方法:点击查看.   需要先在 Crowd 创建应用程序,参考 <Docker 创建 Crowd3.3.2 以 ...

  2. 【python】基础知识练习题一

    1.执行Python脚本的两种方式 1.pyhon解释器 python zhurui.py 2.简述位.字节的关系 8位一个字节 3.简述ascii.unicode.utf-­‐8.gbk的关系 4. ...

  3. (一)初识Redis

    1.redis简介 Redis是一个速度非常快的key-value非关系型存储数据库,可以存储5种形态的键值对,可以将存储在内存中的键值对持久化到硬盘,可以使用复制特性扩展读性能,还可以使用客户端分片 ...

  4. [ gczdac ] 20190306 访者必阅

    1.我的私人博客!!! 2.博主还处于入门学习阶段,并且非常玻璃心 3. 激烈讨论√  人身攻击× 4. 欢迎指正错误,相互学习 5. 很少在线,无法及时回复请谅解 https://www.cnblo ...

  5. 微信小程序小结02-- 完整的demo

    小程序确实方便,在移动端方便小个体宣传,不需要服务器和域名,还有客服功能.按朋友的意思,做了一次调整,分成了首页.预约和我的三个页面. 下面说下遇到的几个问题. 01.客服功能 不得不说这个一条龙服务 ...

  6. ajax data属性传值的方式总结

    在和后台同事对接口的时候,有一个小问题一直困扰着我.那就是用ajax请求后台接口数据,需要用data属性传值的时候,data属性传值的方式感觉没有统一用一种方式. 后来仔细想想,其实哪种方式都可以,主 ...

  7. .NET Core微服务之服务间的调用方式（REST and RPC）

    Tip: 此篇已加入.NET Core微服务基础系列文章索引 一.REST or RPC ? 1.1 REST & RPC 微服务之间的接口调用通常包含两个部分,序列化和通信协议.常见的序列化 ...

  8. 数据结构之表（C语言实现）

    抽象数据类型 (abstract data type,ADT) 抽象数据类型是一些操作的集合.抽象数据类型是数学中的定义,在ADT中,我们不关心操作是如何被实现的.因此,这可以看做是模块化的扩充.例如 ...

  9. DotNetCore跨平台~关于appsettings.json里各种配置项的读取

    回到目录 对于dotnet Core来说,依赖注入的集成无疑是最大的亮点,它主要用在服务注册与注入和配置文件注册与注入上面,我们一般会在程序入口先注册服务或者文件,然后在需要的地方使用注入即可,下面主 ...

  10. MongoDB学习笔记~地图坐标的支持与附近点的查找

    回到目录 Mongodb这个数据库很不错,它的方法也不错,为了实现坐标功能,它甚至为我们提供了geo里的一些算法,帮助我们通过某个点去位置和查找N个附近的点. 表面 在您存储地理数据和编写查询条件前, ...