【js】canvas——Atomic-particle-motion
原子粒动
<!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的更多相关文章
- 【js】appendChild
appendChild主要是用来追加节点插入到最后:循环的时候由于不停的搬家导致length在改变. 使用for循环 <!Doctype html> <html xmlns= ...
- 【JS】AJAX跨域-被调用方与调用方解决方案(二)
解决跨域问题 跨域问题说明,参考[JS]AJAX跨域-JSONP解决方案(一) 实例,使用上一章([JS]AJAX跨域-JSONP解决方案(一))的实例 解决方案三(被调用方支持跨域-服务端代码解决) ...
- 【js】Leetcode每日一题-制作m束花所需的最少天数
[js]Leetcode每日一题-制作m束花所需的最少天数 [题目描述] 给你一个整数数组 bloomDay,以及两个整数 m 和 k . 现需要制作 m 束花.制作花束时,需要使用花园中 相邻的 k ...
- 【js】Leetcode每日一题-完成所有工作的最短时间
[js]Leetcode每日一题-完成所有工作的最短时间 [题目描述] 给你一个整数数组 jobs ,其中 jobs[i] 是完成第 i 项工作要花费的时间. 请你将这些工作分配给 k 位工人.所有工 ...
- 【js】Leetcode每日一题-数组异或操作
[js]Leetcode每日一题-数组异或操作 [题目描述] 给你两个整数,n 和 start . 数组 nums 定义为:nums[i] = start + 2*i(下标从 0 开始)且 n == ...
- 【js】Leetcode每日一题-解码异或后数组
[js]Leetcode每日一题-解码异或后数组 [题目描述] 未知 整数数组 arr 由 n 个非负整数组成. 经编码后变为长度为 n - 1 的另一个整数数组 encoded ,其中 encode ...
- 【js】Leetcode每日一题-叶子相似的树
[js]Leetcode每日一题-叶子相似的树 [题目描述] 请考虑一棵二叉树上所有的叶子,这些叶子的值按从左到右的顺序排列形成一个 叶值序列 . 举个例子,如上图所示,给定一棵叶值序列为 (6, 7 ...
- 【js】Leetcode每日一题-子数组异或查询
[js]Leetcode每日一题-子数组异或查询 [题目描述] 有一个正整数数组 arr,现给你一个对应的查询数组 queries,其中 queries[i] = [Li, Ri]. 对于每个查询 i ...
- 【js】Leetcode每日一题-停在原地的方案数
[js]Leetcode每日一题-停在原地的方案数 [题目描述] 有一个长度为 arrLen 的数组,开始有一个指针在索引 0 处. 每一步操作中,你可以将指针向左或向右移动 1 步,或者停在原地(指 ...
随机推荐
- MySQL必知必会(正则表达式)
SELECT prod_name FROM products ' #检索列prod_name包含文本1000的所有行. ORDER BY prod_name; SELECT prod_name FRO ...
- luogu P2759 奇怪的函数 |二分答案
题目描述 使得 x^x达到或超过 n 位数字的最小正整数 x 是多少? 输入格式 一个正整数 n 输出格式 使得 x^x达到 n 位数字的最小正整数 x 计算一个数有多少位 log10(x)+1 #i ...
- linux终端界面的字颜色设置
目录 目录 说明 PS1 颜色语法 保存设置 说明 在网上找了好多资料都不是很详细,要不就是语法有错误. 所以弄了好久才整明白了,写下来方便后面的人学习. 本人linux虚拟机版本为CentOs 6. ...
- python3如何随机生成大数据存储到指定excel文档里
本次主要采用的是python3的第三方库xlwt,来创建一个excel文件.具体步骤如下: 1.确认存储位置,文件命名跟随时间格式 2.封装写入格式 3.实现随机数列生成 4.定位行和列把随机数写入 ...
- 开发 Laravel 扩展的基本流程
创建一个空的laravel项目 composer create-project --prefer-dist laravel/laravel pkg 在新建的 laravel 项目中建立如下目录 qia ...
- 海思HI3518EV200+AR0130开发板DIY——前篇
海思HI3518EV200+AR0130开发板DIY 今天开始要围绕这个项目学习了(还是得从C开始学 ) 缘起(这段主要水废话)相关开发资料 →_→ 原理图设计 原理图整体框架 一.电源部分 HI35 ...
- 205K+程序员关注过的问题:为什么不应该使用Java的原始类型?
在逛 Stack Overflow 的时候,发现了一些访问量像熊耳山一样高的问题,比如说这个:为什么不应该使用Java的原始类型?访问量足足有 205K+,这不得了啊!说明有很多很多的程序员被这个问题 ...
- python利用setsockopt获得端口重用
server.setsockopt(SOL_SOCKET,SO_REUSEADDR,1) 假如端口呗socket使用过,并且利用socket.close()来关闭连接,但此时端口还没有释放,要经过一个 ...
- Winform 中DataGridView、dev Gridview控件添加行标题
有很多种方法. 1.可以在DataGridView控件中的RowStateChanged事件改变行标题单元格的值(Row.HeaderCell.Value) /// <summary> / ...
- java基础-数据类型之殇
一 前言 Java的数据类型分为2种,分别是基本数据类型和引用数据类型:java的数据类型是强数据类型,意味着每声明一个变量,其必定有与之对应的数据类型:面试常问的java8大基本数据类型其实是基本数 ...