原子粒动
<!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. redis位图巧用，节约内存
			
    最近要做一个圣诞抽奖活动,需要记录每天用户签到的记录,以前一般都是用普通的字符串数据类型,每个用户的签到用一个 key // 用户10在活动第一天的签到key为record:1:10 $key = & ...
    
			
    2. 
						
  2. 纯css实现下雪特效
			
    //------------------ css ------------------- /*Keyframes*/ @keyframes snow { 0% { background-positio ...
    
			
    3. 
						
  3. bug小结
			
    在不同的文件下面可以创建同一个包,但是不能创建同一个class文件!!!   ParameterType:需要写实体类的类型,最好不要写实体的别名 这是因为我们在配置mybatis的配置文件时已经说明 ...
    
			
    4. 
						
  4. SQL Server 2019 深度解读：微软数据平台的野望
			
    本文为笔者在InfoQ首发的原创文章,主要利用周末时间陆续写成,也算近期用心之作.现转载回自己的公众号,请大家多多指教. 11 月 4 日,微软正式发布了其新一代数据库产品 SQL Server 20 ...
    
			
    5. 
						
  5. windows下tomcat闪退问题（启动失败）
			
    1. 第一种情况:Java jdk环境变量没配置或配置有问题 java jdk详细的配置过程这里贴一下:https://jingyan.baidu.com/article/6dad5075d1dc40 ...
    
			
    6. 
						
  6. Web 前端学习大纲
			
    什么是前端? 前端即网站前台部分,也叫前端开发,运行在PC端,移动端等浏览器上展现给用户浏览的网页.随着互联网的发展,HTML5,CSS3,前端框架的应用,跨平台响应式网页设计能够适应各种屏幕分辨率, ...
    
			
    7. 
						
  7. git下载问题
			
    官网下载:打不开,可用git for Windows 下载 地址:https://github.com/git-for-windows/git/releases
    
			
    8. 
						
  8. centos7 redis 6379端口telnet不通
			
    1.查看redis服务是否启动,如图所示,redis已经启动 2.查看是否监听正确的ip和端口 发现问题:端口号6379没错,但是ip是127.0.0.1,表示只能本地访问,问题就出在这. 3.修改r ...
    
			
    9. 
						
  9. Python之工作方向
			
    "python基础-->(函数/面向对象/网络编程(scoket套接字)/并发编程(mutiprocessing)) "运维+web开发-->页面展示(django/f ...
    
			
    10. 
						
  10. Spring Cloud Config入门（本地配置）
			
    spring cloud config 简介 Spring Cloud Config为分布式系统中的外部化配置提供服务器和客户端支持.使用Config Server,您可以在所有环境中管理应用程序的外 ...
    
			
    11.