原子粒动
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>canvas动画</title>

    <style>

        body{

            background-color:#000000;

        }

        canvas{

            display: block;

            position: absolute;

            top:0;

            left:0;

            -webkit-box-shadow: inset 0 0 100px #69f;

            -moz-box-shadow: inset 0 0 100px #69f;

            box-shadow: inset 0 0 100px #69f; ;

        }

    </style>

</head>

<body>

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

<script type="text/javascript">

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

        cxt=canvas.getContext("2d");

        w = 500;

        h = 500;

        partical = 100;//原子数量

        particals = [];

        colors = ["#FFFF00","#FFBBFF","#346945","#FF7F00","#FF3030","#EEEE00","#98FB98","#7EC0EE","#7D26CD","#458B74"];

        canvas.width = w;

        canvas.height = h;

        aW = window.innerWidth;

        aH = window.innerHeight;

    canvas.style.left = (aW-w)/2+"px";

    canvas.style.top = (aH-h)/2+"px";

    function FC(){

        this.x = Math.round(Math.random()*w);//x

        this.y = Math.round(Math.random()*h);//y

        this.rad = Math.round(Math.random()*5)+5;//rad

        this.rgba = colors[Math.round(Math.random()*10)];

        this.vx = Math.round(Math.random()*3)-1.5;

        this.vy = Math.round(Math.random()*3)-1.5;

    }

    function draw(){

        cxt.clearRect(0,0,w,h);

        for(var i=0;i<partical;i++){

            var p = particals[i];

            for(var j=0;j<partical;j++){

                var pp = particals[j];

                if(p.rgba == pp.rgba && findDistance(p,pp)<50){

                    cxt.strokeStyle = p.rgba;

                    cxt.moveTo(p.x, p.y);

                    cxt.lineTo(pp.x,pp.y);

                    cxt.stroke();

                }

            }

            cxt.beginPath();

            cxt.fillStyle= p.rgba;

            cxt.arc(p.x, p.y, p.rad,0,Math.PI*2,true);

            cxt.fill();

            cxt.closePath();

            cxt.beginPath();

            cxt.strokeStyle= p.rgba;

            cxt.arc(p.x, p.y, p.rad+20,0,Math.PI*2,true);

            cxt.stroke();

            cxt.closePath();

        }

        upData()

    }

    function upData(){

        for(var i=0;i<partical;i++){

            var p = particals[i];

            p.x += p.vx;

            p.y += p.vy;

            if(p.x>w)p.x=0;

            if(p.x<0)p.x=w;

            if(p.y>h)p.y=0;

            if(p.y<0)p.y=h;

        }

   }

   function findDistance(p1,p2){

        return Math.sqrt(Math.pow(p2.x-p1.x,2)+Math.pow(p2.y-p1.y,2));

    }

    (function int(){

        for(var i=0;i<partical;i++){

            particals.push(new FC)

        }

    })();

setInterval(draw,15)

</script>

</body>

</html>


 
												


											
【js】canvas——Atomic-particle-motion的更多相关文章
	

    
								
  1. 【js】appendChild
		
    appendChild主要是用来追加节点插入到最后:循环的时候由于不停的搬家导致length在改变.     使用for循环 <!Doctype html> <html xmlns= ...
    
		
    2. 
						
  2. 【JS】AJAX跨域-被调用方与调用方解决方案（二）
		
    解决跨域问题 跨域问题说明,参考[JS]AJAX跨域-JSONP解决方案(一) 实例,使用上一章([JS]AJAX跨域-JSONP解决方案(一))的实例 解决方案三(被调用方支持跨域-服务端代码解决) ...
    
		
    3. 
						
  3. 【js】Leetcode每日一题-制作m束花所需的最少天数
		
    [js]Leetcode每日一题-制作m束花所需的最少天数 [题目描述] 给你一个整数数组 bloomDay,以及两个整数 m 和 k . 现需要制作 m 束花.制作花束时,需要使用花园中 相邻的 k ...
    
		
    4. 
						
  4. 【js】Leetcode每日一题-完成所有工作的最短时间
		
    [js]Leetcode每日一题-完成所有工作的最短时间 [题目描述] 给你一个整数数组 jobs ,其中 jobs[i] 是完成第 i 项工作要花费的时间. 请你将这些工作分配给 k 位工人.所有工 ...
    
		
    5. 
						
  5. 【js】Leetcode每日一题-数组异或操作
		
    [js]Leetcode每日一题-数组异或操作 [题目描述] 给你两个整数,n 和 start . 数组 nums 定义为:nums[i] = start + 2*i(下标从 0 开始)且 n ==  ...
    
		
    6. 
						
  6. 【js】Leetcode每日一题-解码异或后数组
		
    [js]Leetcode每日一题-解码异或后数组 [题目描述] 未知 整数数组 arr 由 n 个非负整数组成. 经编码后变为长度为 n - 1 的另一个整数数组 encoded ,其中 encode ...
    
		
    7. 
						
  7. 【js】Leetcode每日一题-叶子相似的树
		
    [js]Leetcode每日一题-叶子相似的树 [题目描述] 请考虑一棵二叉树上所有的叶子,这些叶子的值按从左到右的顺序排列形成一个 叶值序列 . 举个例子,如上图所示,给定一棵叶值序列为 (6, 7 ...
    
		
    8. 
						
  8. 【js】Leetcode每日一题-子数组异或查询
		
    [js]Leetcode每日一题-子数组异或查询 [题目描述] 有一个正整数数组 arr,现给你一个对应的查询数组 queries,其中 queries[i] = [Li, Ri]. 对于每个查询 i ...
    
		
    9. 
						
  9. 【js】Leetcode每日一题-停在原地的方案数
		
    [js]Leetcode每日一题-停在原地的方案数 [题目描述] 有一个长度为 arrLen 的数组,开始有一个指针在索引 0 处. 每一步操作中,你可以将指针向左或向右移动 1 步,或者停在原地(指 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 工作流Activity组件值数据传递获取问题
			
    如图:先简单说一下大致过程 通过具体的菜单节点,加载具体的指令组件.本着低耦合的原件,需要将核查组件从指令组件重拆分出来,作为单独的组件根据业务需要拖拽到指令组件中.但是具体业务方面核查组件一方面需要 ...
    
			
    2. 
						
  2. 前后台分离的 NET Core 通用权限管理系统
			
    前言 从事软件开发这个行业现在已经有十几年了,项目无论大小权限认证.授权模块总是或多或少有功能需求的,这一块费时费力但是又存在于后台,使用最多的可能是运维人员所以处于出力不讨好的尴尬地位,每次有新的项 ...
    
			
    3. 
						
  3. WARNING: Your kernel does not support swap limit capabilities. Limitation discarded.
			
    利用vSphere调整各台虚拟机后,重新启动mesos,让其启动docker,并为每个container分配cpu和mem,但每次都有一个TASK_LOST. 查看mesos slave的log,发现 ...
    
			
    4. 
						
  4. [TimLinux] 养成一个习惯
			
    1. 习惯 在博客园开博之前,大约六个月之前,我开始给自己定下坚持跑步的目标,从而养成了一个习惯.就在大约半个月前,回顾自己的工作经历的时候,发现还有一个来月自己就工作十年了,为此我树立了一个新的目标 ...
    
			
    5. 
						
  5. Redis 使用消息隊列
			
    關鍵函數 ListRightPush  生產消息 ListRightPop   消費消息 這是從右面增或取 左邊亦然
    
			
    6. 
						
  6. jmeter微信公众号接口测试实例
			
    线程组 HTTP Cookie 管理器 HTTP 请求默认值 用户定义的变量 察看结果树 HTTP请求 响应断言 正则表达式提取器 线程组 HTTP Cookie 管理器 HTTP 请求默认值 用户定 ...
    
			
    7. 
						
  7. python故障排除
			
    在初学 Python 时,想要弄懂 Python 的错误信息的含义可能有点复杂.这里列出了常见的的一些让程序 crash 的运行时错误. 1)忘记在 if , elif , else , for ,  ...
    
			
    8. 
						
  8. CCF-CSP题解 201512-3 画图
			
    画图时思路应该清晰一点.我是将坐标\((x,y)\)映射到\(canvas[y][x]\)上. 连线注意\(+\)号的情况,填充写好\(dfs\)就好了. #include <bits/stdc ...
    
			
    9. 
						
  9. 《Java基础知识》动态代理（InvocationHandler）详解
			
    1. 什么是动态代理 对象的执行方法,交给代理来负责.比如user.get() 方法,是User对象亲自去执行.而使用代理则是由proxy去执行get方法. 举例:投资商找明星拍广告,投资商是通过经纪 ...
    
			
    10. 
						
  10. express 中间件的简单应用与实现
			
    express 中间件的简单应用与实现 看了慕课网双越老师的课之后结合自己的理解做了一些简单的总结,如有不恰当之处,欢迎指正. 提到 express 就不得不提到中间件,接下来就简单的介绍一下 exp ...
    
			
    11.