html
之前做的 拿出来分享下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
body{
padding: 0;
margin: 0;
}
#sets{
position: fixed;
bottom: 300px;
right: 65px;
display: none;
display: flex;
align-items: center;
}
.setss{
position: fixed;
bottom: 30px;
right: 30px;
display: none;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#use{
position: fixed;
top: 0;
right: 0;
background-color: transparent;
border: transparent;
width: 50px;
height: 50px;
}
.in1{
width: 50px;
}
</style>
</head>
<body>
<div>
<canvas id="frist" style="border:1px solid #c3c3c3;margin: 0;"></canvas>
</div>
<button id="use"></button>
<div id="sets">
<form class="setss" name="in1">
<span>数量: </span><input class="in1" type="number" />
<span>尺寸: </span><input class="in1" type="number" />
<span>透明度-点0-1: </span><input class="in1" type="number" />
<span>透明度-鼠标线0-1: </sspan><input class="in1" type="number" />
<span>透明度-点线0-1: </span><input class="in1" type="number" />
</form>
<button id="ourb">start</button>
</div>
<script>
var a = document.getElementById('frist'),
Dwidth,
Dheight,
dots = [],
much = 40,
op =1,
opmou = 0.5,
opline = 0.1,
pointSize = 10;
var int = document.getElementsByClassName('in1');
int[0].value = much;
int[1].value = pointSize;
int[2].value = op;
int[3].value = opmou;
int[4].value = opline;
var sizeD = ()=>{
Dwidth = document.documentElement.clientWidth;
Dheight = document.documentElement.clientHeight;
}
sizeD();
console.log(Dwidth,Dheight);
a.width = Dwidth - 8;
a.height = Dheight - 8;
function getdos(){
dots = [];//粒子个数
var ws = a.width,
hs = a.height;
// var wwp = parseInt(ws / (2 * pointSize + 4)), //每行个数
// hhp = parseInt(hs / (2 * pointSize + 4));// 每列个数
var wwp = parseInt(Math.sqrt(much)),
hhp = wwp + 1;
var whp = hhp * wwp;
console.log(wwp + '*' + hhp + '=' + whp);
var wcc = ws / pointSize / wwp,
hcc = hs / pointSize / hhp;
console.log(wcc + '*' + hcc );
var n = 0;
for(var hi = 0; hi < hhp; hi ++){
for (var i = 0; i < wwp; i++) {
// var x = Math.random() * (a.width - 2 * pointSize) + pointSize;
// var y = Math.random() * (a.height - 2 * pointSize) + pointSize;
var xa = (Math.random() * 2 - 1)/1;
var ya = (Math.random() * 2 - 1)/1;
var x = (pointSize + 2 * wcc) + 2 * (i * (pointSize + 2 * wcc));
var y = (pointSize + 2 * hcc) + 2 * (hi * (pointSize + 2 * hcc));
// var xa = 0;
// var ya = 0;
n ++;
if(n > much){
break;
}
dots.splice(n,1,{x, y, xa, ya})
}
}
}
this.getdos();
var bo = document.getElementById('use'),
sb = document.getElementById('ourb'),
se = document.getElementById('sets'),
opens = false;
bo.onclick = ()=>{
open = !open;
if(open){
se.style.display = 'none';
}else{
se.style.display = 'block';
}
}
ourb.onclick = ()=>{
much = +int[0].value;
pointSize = +int[1].value;
if(int[2].value >= 0 && int[2].value <= 1 && int[3].value >= 0 && int[3].value <= 1 && int[4].value >= 0 && int[4].value <= 1){
op = int[2].value;
opmou = int[3].value;
opline = int[4].value;
}else{
console.log('透明度设置错误')
}
getcolor();
this.getdos();
}
window.onresize = ()=>{
sizeD();
console.log(Dwidth,Dheight);
a.width = Dwidth - 8;
a.height = Dheight - 8;
this.getdos();
};
var axt = a.getContext('2d');
var colors = [];//颜色
var getcolor = ()=>{
// for (var i = 0; i < much; i++) {
// var mu = parseInt(Math.random() * 16777215).toString(16);
// colors.splice(i,1,mu)
// }
for (var i = 0; i < much + 3; i++) {
var mu = parseInt(Math.random() * 256);
colors.splice(i,1,mu)
}
}
getcolor();
var warea = {x: -1000, y: -1000, max: 20000};
a.onmousemove = function(e) {
e = e || window.event;
warea.x = e.clientX;
warea.y = e.clientY;
};
document.onmouseout = function(e) {
warea.x = -1000;
warea.y = -1000;
};
document.onclick = (e)=> {
warea.x = -1000;
warea.y = -1000;
};
var active = ()=>{
axt.clearRect(0,0,a.width,a.height);
for (var n = 0; n < dots.length; n++) {
var na = dots[n];
for(var i = 0; i < dots.length; i ++){
var ia = dots[i];
if(ia == na)continue;
var cx = ia.x - na.x,
cy = ia.y - na.y;
na.xa *= ((cx * cx + cy * cy) <= (4 * pointSize * pointSize))? -1: 1;
na.ya *= ((cx * cx + cy * cy) <= (4 * pointSize * pointSize))? -1: 1;
}
dots[n].xa *= (dots[n].x > a.width - pointSize)? -1: 1;
dots[n].ya *= (dots[n].y > a.height - pointSize)? -1: 1;
dots[n].xa *= (dots[n].x < pointSize)? -1: 1;
dots[n].ya *= (dots[n].y < pointSize)? -1: 1;
dots[n].x += dots[n].xa;
dots[n].y += dots[n].ya;
var c1 = colors[n];
var c2 = colors[n + 1];
var c3 = colors[n + 2];
// axt.fillStyle = '#' + c;
axt.fillStyle = 'rgba(' + c1 + ',' + c2 + ',' + c3 + ',' + op + ')';
// axt.fillRect(dots[n].x,dots[n].y,pointSize,pointSize);
axt.beginPath();
axt.arc(dots[n].x,dots[n].y,pointSize,0,Math.PI * 2,true);
axt.closePath();
axt.fill();
var ndots = [warea].concat(dots);
for (var i = 0; i < ndots.length; i++) {
var d2 = ndots[i];
if (dots[n] === d2 || d2.x === null || d2.y === null) continue;
var xc = dots[n].x - d2.x;
var yc = dots[n].y - d2.y;
var dis = xc * xc + yc * yc;
var ratio;
if (dis < d2.max) {
// 如果是鼠标，则让粒子向鼠标的位置移动
if (d2 === warea && dis > (d2.max / 2)) {
// dots[n].x -= xc * 1;
// dots[n].y -= yc * 1;
dots[n].x -= xc * 0.01;
dots[n].y -= yc * 0.01;
}
ratio = (d2.max - dis) / d2.max;
axt.beginPath();
axt.lineWidth = ratio / 2;
// axt.fillStyle = ;
// axt.strokeStyle = 'rgba(0,0,0,' + (ratio + 0.2) + ')';
axt.strokeStyle = 'rgba(' + c1 + ',' + c2 + ',' + c3 + ',' + opmou + ')';
axt.moveTo(dots[n].x, dots[n].y);
axt.lineTo(d2.x, d2.y);
axt.stroke();
}
var mx = dots[n].x,
my = dots[n].y,
mxa = d2.x,
mya = d2.y;
var mxc = mxa - mx,
myc = mya - my;
var cut = Math.sqrt(+Math.pow(mxc,2) + +Math.pow(myc,2));
// console.log(cut);
if(cut < 200){
axt.beginPath();
axt.lineWidth = 0.1;
axt.strokeStyle = 'rgba(' + c1 + ',' + c2 + ',' + c3 + ',' + opline + ')';
axt.moveTo(mx, my);
axt.lineTo(mxa, mya);
axt.stroke();
}
}
}
// console.log(dots)
}
window.setInterval(()=>{
active();
},10);
</script>
</body>
</html>
资源下载 0积分
链接: 背景文件.
651
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
