로그 인 인터페이스 코드

원래 주소.http://www.qdfuns.com/notes/25573/c983d0def24ac412b22d53a9bec3ae89.html

<
script
>
        
//
캔버스 너비 와 생 성 점 의 개 수 를 정의 합 니 다.
        
var
WIDTH
=
window.
innerWidth,
            
HEIGHT
=
window.
innerHeight,
            
POINT
=
35;
        
var
canvas
=
document.
getElementById(
'
Mycanvas
');
        
canvas.
width
=
WIDTH,
            
canvas.
height
=
HEIGHT;
        
var
context
=
canvas.
getContext(
'
2d
');
        
context.
strokeStyle
=
'
rgba(0,0,0,0.02)
',
            
context.
strokeWidth
=
1,
            
context.
fillStyle
=
'
rgba(0,0,0,0.05)
';
        
var
circleArr
= [];
        
//
선: xy 좌 표를 시작 하고 xy 좌 표를 끝 내 며 선 투명도
        
function
Line(
x,
y,
_x,
_y,
o) {
            
this.
beginX
=
x,
                
this.
beginY
=
y,
                
this.
closeX
=
_x,
                
this.
closeY
=
_y,
                
this.
o
=
o;
        }
        
//
점: 원심 xy 좌표, 반경, 프레임 당 xy 이동 거리
        
function
Circle(
x,
y,
r,
moveX,
moveY) {
            
this.
x
=
x,
                
this.
y
=
y,
                
this.
r
=
r,
                
this.
moveX
=
moveX,
                
this.
moveY
=
moveY;
        }
        
//
max 와 min 사이 의 난수 생 성
        
function
num(
max,
_min) {
            
var
min
=
arguments[
1]
||
0;
            
return
Math.
floor(
Math.
random()
* (
max
-
min
+
1)
+
min);
        }
        
//
원점 그리 기
        
function
drawCricle(
cxt,
x,
y,
r,
moveX,
moveY) {
            
var
circle
=
new
Circle(
x,
y,
r,
moveX,
moveY)
            
cxt.
beginPath()
            
cxt.
arc(
circle.
x,
circle.
y,
circle.
r,
0,
2
*
Math.
PI)
            
cxt.
closePath()
            
cxt.
fill();
            
return
circle;
        }
        
//
선 그리 기
        
function
drawLine(
cxt,
x,
y,
_x,
_y,
o) {
            
var
line
=
new
Line(
x,
y,
_x,
_y,
o)
            
cxt.
beginPath()
            
cxt.
strokeStyle
=
'
rgba(0,0,0,
'
+
o
+
'
)
'
            
cxt.
moveTo(
line.
beginX,
line.
beginY)
            
cxt.
lineTo(
line.
closeX,
line.
closeY)
            
cxt.
closePath()
            
cxt.
stroke();
        }
        
//
원점 생 성 초기 화
        
function
init() {
            
circleArr
= [];
            
for (
var
i
=
0;
i
<
POINT;
i
++) {
                
circleArr.
push(
drawCricle(
context,
num(
WIDTH),
num(
HEIGHT),
num(
15,
2),
num(
10,
-
10)
/
40,
num(
10,
-
10)
/
40));
            }
            
draw();
        }
        
//
프레임 마다 그리 기
        
function
draw() {
            
context.
clearRect(
0,
0,
canvas.
width,
canvas.
height);
            
for (
var
i
=
0;
i
<
POINT;
i
++) {
                
drawCricle(
context,
circleArr[
i].
x,
circleArr[
i].
y,
circleArr[
i].
r);
            }
            
for (
var
i
=
0;
i
<
POINT;
i
++) {
                
for (
var
j
=
0;
j
<
POINT;
j
++) {
                    
if (
i
+
j
<
POINT) {
                        
var
A
=
Math.
abs(
circleArr[
i
+
j].
x
-
circleArr[
i].
x),
                            
B
=
Math.
abs(
circleArr[
i
+
j].
y
-
circleArr[
i].
y);
                        
var
lineLength
=
Math.
sqrt(
A
*
A
+
B
*
B);
                        
var
C
=
1
/
lineLength
*
7
-
0.009;
                        
var
lineOpacity
=
C
>
0.03
?
0.03
:
C;
                        
if (
lineOpacity
>
0) {
                            
drawLine(
context,
circleArr[
i].
x,
circleArr[
i].
y,
circleArr[
i
+
j].
x,
circleArr[
i
+
j].
y,
lineOpacity);
                        }
                    }
                }
            }
        }
        
//
호출 실행
        
window.
onload
=
function () {
            
init();
            
setInterval(
function () {
                
for (
var
i
=
0;
i
<
POINT;
i
++) {
                    
var
cir
=
circleArr[
i];
                    
cir.
x
+=
cir.
moveX;
                    
cir.
y
+=
cir.
moveY;
                    
if (
cir.
x
>
WIDTH)
cir.
x
=
0;
                    
else
if (
cir.
x
<
0)
cir.
x
=
WIDTH;
                    
if (
cir.
y
>
HEIGHT)
cir.
y
=
0;
                    
else
if (
cir.
y
<
0)
cir.
y
=
HEIGHT;
                }
                
draw();
            },
16);
        }
    
<
/
script
>