原子粒动
<!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. js-编程练习题-输出年月日以及练习字符串分割,检索,转换整数(int)
			
    这是在慕课网上看到的编程题-如有侵权,请联系本人删除. 当然:题是他们的,做题是我的...嘿嘿嘿 某班的成绩出来了,现在老师要把班级的成绩打印出来. 效果图: XXXX年XX月X日 星期X--班级总分 ...
    
			
    2. 
						
  2. Linux下基于Docker部署.Net Core web api项目
			
    Docker的好处我就不说啦,问问度娘就知道了
    
			
    3. 
						
  3. UESTC-1975弗吉桑(回文串,manacher算法)
			
    弗吉桑 Time Limit: 3000 MS     Memory Limit: 64 MB Submit Status 弗吉桑是一座横跨清水河大草原的活火山,位于子科技大学主楼东北方约 80km  ...
    
			
    4. 
						
  4. Java继承之再谈构造器
			
    目录 Java继承之再谈构造器 初始化基类 默认构造器 带参数的构造器 子类调用父类构造器 Java继承之再谈构造器 初始化基类 前面提到,继承是子类对父类的拓展.<Thinking in Ja ...
    
			
    5. 
						
  5. Orleans的入门教程
			
    Orleans的入门教程  官方Hello World 地址 https://github.com/dotnet/orleans/tree/master/Samples/2.0/HelloWorld  ...
    
			
    6. 
						
  6. 面试BAT前先搞定这18道MySQL经典面试题（含答案解析）
			
    一.MySQL的复制原理以及流程 (1)复制基本原理流程 1. 主:binlog线程——记录下所有改变了数据库数据的语句,放进master上的binlog中: 2. 从:io线程——在使用start  ...
    
			
    7. 
						
  7. Unity5优秀插件分享
			
    转载请标明原文地址:http://www.cnblogs.com/zhangyukof/p/6836001.html  天空盒:1.SkyboxesUnity4中自带的天空盒,经常用到.不知道为什么U ...
    
			
    8. 
						
  8. contiue和break的用法
			
    contiue和break的作用分别是什么: 1.continue的意思是终止本次循环,直接进入下一次循环. 注意: continue不能加在循环体的最后一步执行的代码,因为代码加上去毫无意义 2.b ...
    
			
    9. 
						
  9. 服务器上无法调用Office组件的解决方法（HRESULT:0X800A03EC异常）
			
    HRESULT:0X800A03EC的异常,经过多番查找,终于找到了解决方法,在 Windows 2008 中, 如果以 SYSTEM 用户跑, 系统会去寻找 SYSTEM 这个用户的 Profile ...
    
			
    10. 
						
  10. Java String 如何加双引号
			
    public class Test{ public static void main(String[] args){ String str1 = "\"name\"&qu ...
    
			
    11.