原子粒动
<!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. 【华为云网络技术分享】HTTP重定向HTTPS配置指南
			
    [摘要] 本文介绍使用华为云弹性负载均衡配置Http重定向到Https的方法. 1. HTTP.HTTPS 头部标识 ELB 对 HTTPS 进行代理,无论是 HTTP 还是 HTTPS 请求,到了  ...
    
			
    2. 
						
  2. 转:SSL 握手协议详解
			
    SSL 握手协议详解 RSA作为身份认证,ECDHE来交换加密密钥,AES/DES等作为加密. 如果RSA来加解密,那么身份认证后,直接用认证后的RSA公钥解密.不需要再额外交换加密密钥了. 相关报文 ...
    
			
    3. 
						
  3. docker的安装及常用命令
			
    一:概述 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux机器或Windows 机器上,也可以实现虚拟化,容器是完全使用 ...
    
			
    4. 
						
  4. Cisco 7200 路由 PPPOE 拨号详解
			
    1.1配置虚拟拨号接口 R1(config)#vpdn enable                  #启用vpdn虚拟专用拨号网络 R1(config)#interface dialer 1    ...
    
			
    5. 
						
  5. GitHub 上值得参考的完整的 iOS-App 源码
			
    转自:https://www.zhihu.com/question/28518265 作者:wjh2005链接:https://www.zhihu.com/question/28518265/answ ...
    
			
    6. 
						
  6. iOS 弹窗alertView使用详解
			
    转自:http://blog.it985.com/4321.html alertView是iOS自带的弹窗通知框,我们来看下默认样式的效果图 下面直接上代码 1 2 3 4 5 - (void)del ...
    
			
    7. 
						
  7. NIM游戏，NIM游戏变形，威佐夫博弈以及巴什博奕总结
			
    NIM游戏,NIM游戏变形,威佐夫博弈以及巴什博奕总结 经典NIM游戏: 一共有N堆石子,编号1..n,第i堆中有个a[i]个石子. 每一次操作Alice和Bob可以从任意一堆石子中取出任意数量的石子 ...
    
			
    8. 
						
  8. 一文讲透Dubbo负载均衡之最小活跃数算法
			
    本文是对于Dubbo负载均衡策略之一的最小活跃数算法的详细分析.文中所示源码,没有特别标注的地方均为2.6.0版本. 为什么没有用截止目前的最新的版本号2.7.4.1呢?因为2.6.0这个版本里面有两 ...
    
			
    9. 
						
  9. usb fx2  cy68013 Cyapi使用心得
			
    Cyapi使用心得(1)--USB连接 用Cyapi也有一阵了,这个确实比EZusb的api好用,简单说下Cyapi的使用心得,在编程中应该注意的一些问题,毕竟,说起来,那个CYapi的说明文档讲的实 ...
    
			
    10. 
						
  10. 【JS】379- 教你玩转数组 reduce
			
    reduce 是数组迭代器(https://jrsinclair.com/articles/2017/javascript-without-loops/)里的瑞士军刀.它强大到您可以使用它去构建大多数 ...
    
			
    11.