<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. Web前端-Ajax基础技术(下)

    Web前端-Ajax基础技术(下) 你要明白ajax是什么,怎么使用? ajax,web程序是将信息放入公共的服务器,让所有网络用户可以通过浏览器进行访问. 浏览器发送请求,获取服务器的数据: 地址栏 ...

  2. windows凭据管理

    解决windows凭据无法保存的问题1: 运行-gpedit.msc(组策略)-计算机配置-管理模板-系统-凭据分配 双击右侧”允许分配保存的凭据用于仅NTLM服务器身份验证“ 在弹出的窗口中选中“已 ...

  3. Win10系统修改主机名、用户名称和密码、以及C盘中的用户文件夹名

    写在前面 近期重新安装了Ubuntu16.04系统,同时也修改了Windows10系统的用户名.密码,还有C盘用户文件夹名称.对于Linux和windows系统来说,修改名称基本都是三部分,主机名.用 ...

  4. LeetCode算法题-Rotate String（Java实现）

    这是悦乐书的第317次更新,第338篇原创 在开始今天的算法题前,说几句,今天是世界读书日,推荐两本书给大家,<终身成长>和<禅与摩托车维修艺术>,值得好好阅读和反复阅读. 0 ...

  5. 记录SoapUI使用说明

    一.SoapUI简介 SoapUI是一个开源测试工具,通过soap/http来检查.调用.实现Web Service的功能/负载/符合性测试.该工具既可作为一个单独的测试软件使用,也可利用插件集成到E ...

  6. jquery ajax跨域请求后台的简单例子

    一.简介AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新. ajax() 方法通过 HTTP 请求加载远程数据. 该方法是 jQuery 底层 AJAX 实现.简 ...

  7. PHP全栈学习笔记5

    php与mysql数据库,PHP支持很多数据库,与mysql为牛逼组合,mysql数据库的基础知识的掌握是由必要的,要了解如何操作mysql数据库,数据表的方法. 什么是数据库,数据库能做什么,数据库 ...

  8. 使用 Parallels Destop 最小化安装 centOS 操作系统

    1. 环境准备 macOS 操作系统 Parallels Destop 13 CentOS 7.6 Minimal ISO 镜像文件 2. 新建操作系统 选择下载好的 CentosOS 7.6 即 C ...

  9. Socket模拟HTTP请求

    WEB服务器可以可以理解为socket的上层封装,其也是TCP/IP协议,只要知道其IP地址和端口号就可以与他进行通信了 与WEB服务器数据交互,其重点在于请求头,如果请求头不对则不能进行数据传输 简 ...

  10. 一个比Spring Boot快44倍的Java框架！

    最近栈长看到一个框架,官方号称可以比 Spring Boot 快 44 倍,居然这么牛逼,有这么神奇吗?今天带大家来认识一下. 这个框架名叫:light-4j. 官网简介:A fast, lightw ...