<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. 驰骋工作流引擎-底层开发API 说明文档

    驰骋工作引擎-底层开发API 登录与门户API 首先要进行代码集成与组织机构的集成 其次在自己的系统登录界面,登录成功后要执行ccbpm的框架登录. 所谓的登录就是调用ccbpm的登录接口,如左边的代 ...

  2. markdown 基本操作

    无序列表:输入-之后输入空格有序列表:输入数字+“.”之后输入空格任务列表:-[空格]空格 文字标题:ctrl+数字表格:ctrl+t生成目录:[TOC]按回车选中一整行:ctrl+l选中单词:ctr ...

  3. 网络流 P3358 最长k可重区间集问题

    P3358 最长k可重区间集问题 题目描述 对于给定的开区间集合 I 和正整数 k,计算开区间集合 I 的最长 k可重区间集的长度. 输入输出格式 输入格式: 的第 1 行有 2 个正整数 n和 k, ...

  4. qml demo分析(threadedanimation-线程动画)

    一.效果预览 使用过qml的同学都知道,使用qml做动画效果是非常简单的,再也不需要像QWidget那样,自己模拟一个动画,费时又费力,往往还达不到效果.今天我们就来分析下qml的两种动画实现方式,如 ...

  5. Asp .Net Core 读取appsettings.json配置文件

         Asp .Net Core 如何读取appsettings.json配置文件?最近也有学习到如何读取配置文件的,主要是通过 IConfiguration,以及在Program中初始化完成的. ...

  6. 接口自动化：HttpClient + TestNG + Java(五) - 接口测试数据驱动

    在上一篇中,我们实现了post方法请求的封装和测试,这一篇我们做测试数据的分离. 5.1 测试数据处理思路 5.1.1 测试数据分离 这里我想到,我们之前的测试demo里,全都是在testNG类里去写 ...

  7. 使用redis有序集合sorted set设计高效查询ip所在地

    1.将纯真版ip数据  xxx.data 导入至 redis(整个过程只花费了几秒) 引入nuget包 CSRedisCore,使用方法见:https://github.com/2881099/csr ...

  8. @vue-cli3安装element组件过程

    在创建好的项目目录下 执行: vue add element 如图选择对应的选项 安装成功!KO!

  9. Redis协议规范(RESP)

    Redis 即 REmote Dictionary Server (远程字典服务): 而Redis的协议规范是 Redis Serialization Protocol (Redis序列化协议) 该协 ...

  10. Powershell:关于PSCustomObject你想知道的一切(译)

    PSCustomObject是Powershell里非常重要的一个工具,我们先从基础开始然后再循序渐进讲到一些更高级的话题.PSCustomObject旨在于用简单的方法来创建结构化数据.下面的第一个 ...