<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. [转]为什么复制构造函数的参数需要加const和引用

    [转]为什么复制构造函数的参数需要加const和引用 一.引言 1.0在解答这个问题之前,我们先跑个小程序,看下调用关系. #include <iostream> using namesp ...

  2. 还在用AIDL吗？试试EasyMessenger吧

    EasyMessenger 直达Github项目地址 一款用于Android平台的基于Binder的进程间通信库,采用annotationProcessor生成IPC通信需要的代码.EasyMesse ...

  3. 秋季学期学习总结&&以及下学期的期待

    秋季总结 第一学期已经结束了,下面来分点归纳下知识点: ·基础编程:利用c语言来进行编程 ·分支结构:利用if-else语句和switch语句编程,以及字符型数据的利用 ·循环结构:利用while.d ...

  4. 零基础如何自学java开发？

    开篇直奔主题,java 学习个人感觉分为两种途径,第一种是在学校,在培训机构等地方学习. 有人指导:第二种是自学,通过视频,书籍,朋友等完成学习. 本文适合 自学,且基础薄弱或者无基础的人.先介绍下我 ...

  5. Vue(day8)

    继续上一篇文章的内容,本文主要内容为项目中新闻资讯模块的实现. 新闻资讯页面主要是当我们点击这个按钮时跳转到新闻列表界面. 一.新闻资讯的路由设计 将新闻资讯的标签改为路由:(a标签改为router- ...

  6. 【Android Studio安装部署系列】五、新建你的第一个项目：HelloWorld

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 新建项目的步骤. 开始创建项目 如果是刚安装Android studio的话,点击Start a new Android Studi ...

  7. DotNetCore跨平台~认识环境和环境变量

    回到目录 环境 环境,对于开发来说就是部署的一种场景,你可以是调试场景,测试场景,生产场景,当然还可以有很多其它的场景,只要你的项目需要就可以自定义,微软帮我们定义了三种标准的环境变量,下面来说一下． ...

  8. 网络学习笔记（一）：TCP连接的建立与关闭

      五层网络模型分为:物理层.数据链路层.网络层.传输层.应用层.其中,传输层有两种主要协议:面向连接的TCP(Transmission Control Protocol 传输控制协议).无连接的UD ...

  9. Virtual Box虚拟机Ubuntu18.X系统安装及Mysql基本开发配置

    Linux简介 什么是 Linux? Linux:世界上不仅只有一个 Windows 操作系统,还有 Linux.mac.Unix 等操作系统.桌面操作系统下 Windows 是霸主,而 Linux ...

  10. Centos7+LVS-DR+keepalived实验（包含sorry-server、日志、及HTTP-GET的健康检测）

    目录检索 一.简介 1.lvs-dr原理请参考原理篇 2.keepalived原理请参考原理篇 3.基于lvs-dr+keepalived故障切换架构图如下: 二.部署 1.环境 2.准备RS的web ...