原子粒动
<!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. MySQL必知必会(正则表达式)
			
    SELECT prod_name FROM products ' #检索列prod_name包含文本1000的所有行. ORDER BY prod_name; SELECT prod_name FRO ...
    
			
    2. 
						
  2. luogu P2759 奇怪的函数 |二分答案
			
    题目描述 使得 x^x达到或超过 n 位数字的最小正整数 x 是多少? 输入格式 一个正整数 n 输出格式 使得 x^x达到 n 位数字的最小正整数 x 计算一个数有多少位 log10(x)+1 #i ...
    
			
    3. 
						
  3. linux终端界面的字颜色设置
			
    目录 目录 说明 PS1 颜色语法 保存设置 说明 在网上找了好多资料都不是很详细,要不就是语法有错误. 所以弄了好久才整明白了,写下来方便后面的人学习. 本人linux虚拟机版本为CentOs 6. ...
    
			
    4. 
						
  4. python3如何随机生成大数据存储到指定excel文档里
			
    本次主要采用的是python3的第三方库xlwt,来创建一个excel文件.具体步骤如下: 1.确认存储位置,文件命名跟随时间格式 2.封装写入格式 3.实现随机数列生成 4.定位行和列把随机数写入  ...
    
			
    5. 
						
  5. 开发 Laravel 扩展的基本流程
			
    创建一个空的laravel项目 composer create-project --prefer-dist laravel/laravel pkg 在新建的 laravel 项目中建立如下目录 qia ...
    
			
    6. 
						
  6. 海思HI3518EV200+AR0130开发板DIY——前篇
			
    海思HI3518EV200+AR0130开发板DIY 今天开始要围绕这个项目学习了(还是得从C开始学 ) 缘起(这段主要水废话)相关开发资料 →_→ 原理图设计 原理图整体框架 一.电源部分 HI35 ...
    
			
    7. 
						
  7. 205K+程序员关注过的问题：为什么不应该使用Java的原始类型？
			
    在逛 Stack Overflow 的时候,发现了一些访问量像熊耳山一样高的问题,比如说这个:为什么不应该使用Java的原始类型?访问量足足有 205K+,这不得了啊!说明有很多很多的程序员被这个问题 ...
    
			
    8. 
						
  8. python利用setsockopt获得端口重用
			
    server.setsockopt(SOL_SOCKET,SO_REUSEADDR,1) 假如端口呗socket使用过,并且利用socket.close()来关闭连接,但此时端口还没有释放,要经过一个 ...
    
			
    9. 
						
  9. Winform 中DataGridView、dev Gridview控件添加行标题
			
    有很多种方法. 1.可以在DataGridView控件中的RowStateChanged事件改变行标题单元格的值(Row.HeaderCell.Value) /// <summary> / ...
    
			
    10. 
						
  10. java基础-数据类型之殇
			
    一 前言 Java的数据类型分为2种,分别是基本数据类型和引用数据类型:java的数据类型是强数据类型,意味着每声明一个变量,其必定有与之对应的数据类型:面试常问的java8大基本数据类型其实是基本数 ...
    
			
    11.