JSDM

HTML

 
1
<body>
2
    <canvas id='canv' width=2000 height=700></canvas>
3
</body>
4
<!-- Life's Not Complete Without Art. (Expand Your Editor > ASCII Is Not Responsive ;) 
5
6
         _..':::\
7
         /::::::::\
8
        /::::::::::\
9
       /::::::::::::\ ___
10
      (:.--.)\/(,.--.:::::;.
11
      ,',-. \   / ,-.`.:::::)
12
     ( /   \     /   \ ):::/%\
13
      || .d|     |b. ||:::'|%%\
14
     _|| 88|     |88 ||_   |%%%\
15
    /. \ 88|.---.|88 / ,\  |%%^%\
16
    `.\ `--"     "--' /,'  |%   %)
17
      `>  _________<'
18
    ,-' ,---.---.---. `-.
19
    `--'\   \tmr/    /`--'
20
       `.\         /,'
21
         \\_______//
22
          `-------' 
23
24
!-->

CSS

xxxxxxxxxx
4
 
1
body{
2
    background:#000; 
3
    overflow:hidden;
4
}
? ?
? ?
必须是有效的URL
+ 添加另一个资源

JS

xxxxxxxxxx
127
 
1
//Move your mouse around to change depth of color(full screen gives the best result - more space)...how bright can you get it?
2
//I had a general concept of them & played around a bit with Three.js particles; but have never created one from pure JS & canvas before, so I started with this tutorial:http:seb.ly/2011/02/html5-canvas-3d-particles-uniform-distribution/ and combined some ideas from this: https://www.khanacademy.org/computer-programming/particle-system/6379895271194624 && and then finally, after researching various sources, figured out how to get it to correctly follow the mouse & change size && color depth -- Anyway, here is my result!-->
3
4
//Global variables
5
p=new Array();
6
mx=0;     // mouse x
7
my=0;     // mouse y  
8
radius=1;   // radius
9
coef=0;     // coef
10
w=0;      // canvas width
11
h=0;      // canvas height.
12
ra=5;     // particle size.
13
14
//Class Pa for particle.
15
function Pa(ox,oy,c,s)
16
{
17
  this.x=0;   // center x coordinate
18
  this.y=0;   // center y coordinate
19
  this.ox=ox;   // offset x
20
  this.oy=oy;   // offset y
21
  this.c=c;   // colour
22
  this.speed=s; // speed
23
  this.sx=0;    // shake x
24
  this.sy=0;    // shake y
25
}  
26
27
//Program start
28
window.onload=function() 
29
{
30
  a=document.getElementById('canv');
31
  c=a.getContext('2d');
32
  
33
  w=a.width;
34
  h=a.height;
35
  mx=w/2;
36
  my=h/2;
37
38
  a.addEventListener('mousemove', function(evt)
39
  {
40
    var r=a.getBoundingClientRect();
41
    mx=evt.clientX-r.left;
42
    my=evt.clientY-r.top;
43
44
    // 0,0 is the center of canvas.
45
    dx=w/2-mx;
46
    dy=h/2-my;
47
    
48
    coef = Math.sqrt(dx*dx + dy*dy) / ((w+h)/14);
49
50
    // If mouse_y is near top or bottom change particle's size. 
51
    if(my < h*0.3 && ra > 1)
52
      ra--;
53
    
54
    if(my > h*0.7 && ra <10)
55
      ra++; 
56
  },false);
57
    
58
  // loop function that recycles "for"
59
  myLoop(0); 
60
  
61
  // Animate
62
  animate();
63
};
64
65
// Clear canvas, update positions.
66
function animate() 
67
{
68
  c.clearRect(0,0,w,h);
69
  
70
  myLoop(1);
71
  
72
  // Canvas rectangle
73
  c.beginPath();c.lineWidth = 1;c.rect(0, 0, w,h);c.stroke();
74
  
75
  window.setTimeout(animate, 16);
76
}
77
78
//Perform initialization or update positions. Hack - recycle the function.
79
//functionality=0 then function update positions.
80
//functionality=1 then function does initialization.
81
function myLoop(functionality)
82
{
83
  for (var i=500;i>=0;i--)
84
  {
85
    if(functionality)
86
    {
87
      // Reduce code- there are many places that use p[i].
88
      l=p[i]; 
89
      
90
      // Update position using custom Xenon theorem (half path between two points)
91
      // in this case a proportional distance between source and target given by .t
92
      l.x+=(mx-l.x)/l.speed;
93
      l.y+=(my-l.y)/l.speed;
94
      
95
      l.sx=Math.random();
96
      l.sy=Math.random();
97
      c.beginPath();
98
      
99
      // Use "arc" to draw circle, but 6.28318-coef for special effect.
100
      c.arc(l.x+l.ox+l.sx, l.y+l.oy+l.sy, ra,0,6.28318-coef);
101
      c.fillStyle=l.c;
102
      c.fill();
103
      c.strokeStyle=l.c;
104
      c.stroke();
105
    }
106
    else
107
    {
108
      // Convert to radian.(will effect length/width of system
109
      angle = (137.5077 * Math.PI / 180 * i); 
110
      
111
      // Each 5 loops, perform radius variation. Higher the mod #, narrower the partical tunnel
112
      if ((i % 6) == 0)           
113
        radius +=2;
114
      
115
      // Hack: use speed to generate color and make it depend on radius.
116
      speed = radius + 4;
117
      
118
      // Create and initialize particle item. 
119
      pr=new Pa(
120
        Math.cos(angle)*radius,
121
        Math.sin(angle)*radius,
122
        'rgba('+speed*4+','+speed+','+speed*12+','+(0.8)+')',
123
        speed);
124
      p.push(pr);
125
    }
126
  }
127
}
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

  1. 暂无文件
拖动文件到上面的区域或者:
加载中 ..................