JSDM

HTML

4
 
1
<div class="wrapper">
2
<canvas id="surface"></canvas>
3
  <button id="changer" type="button">Switch State</button>
4
</div>

CSS

x
 
1
body{
2
  background:#000;
3
}
4
5
.wrapper {
6
  margin: 20px auto;
7
  text-align: center;
8
}
9
canvas {
10
  width: 100%;
11
  height: 100%;
12
}
13
? ?
? ?
必须是有效的URL
+ 添加另一个资源

JS

97
 
1
$( document ).ready(function() {
2
  
3
  // Set canvas drawing surface
4
  var space = document.getElementById("surface");
5
  var surface = space.getContext("2d");
6
  var partState = "lighter";
7
  surface.scale(1,1);
8
 
9
   $('#changer').on('click', function() {
10
   if (partState==="xor"){
11
     partState="lighter";
12
   }else{
13
     partState="xor";
14
   }
15
  });
16
  
17
  // Set Particles
18
  var particles = [];
19
  var particle_count = 150;
20
  for(var i = 0; i < particle_count; i++) {
21
    particles.push(new particle());
22
  }
23
  var time = 0;
24
  // Set wrapper and canvas items size
25
  var canvasWidth=320;
26
  var canvasHeight=480;
27
  $(".wrapper").css({width:canvasWidth,height:canvasHeight});
28
  $("#surface").css({width:canvasWidth,height:canvasHeight});
29
30
  // shim layer with setTimeout fallback from Paul Irish
31
  window.requestAnimFrame = (function(){
32
    return  window.requestAnimationFrame       ||
33
            window.webkitRequestAnimationFrame ||
34
            window.mozRequestAnimationFrame    ||
35
            function( callback ){
36
              window.setTimeout(callback, 6000 / 60);
37
            };
38
  })(); 
39
40
  function particle() {
41
     
42
    this.speed = {x: -1+Math.random()*2, y: -5+Math.random()*5};
43
     canvasWidth = (document.getElementById("surface").width);
44
     canvasHeight= (document.getElementById("surface").height);
45
     this.location = {x: canvasWidth/2, y: (canvasHeight/2)+35};
46
47
    this.radius = .5+Math.random()*1;
48
49
    this.life = 10+Math.random()*10;
50
    this.death = this.life;
51
     if (partState==="lighter"){
52
      this.r = 255;
53
      this.g = Math.round(Math.random()*155);
54
      this.b = 0;
55
     }else{
56
       this.r = Math.round(Math.random()*255);
57
      this.g = Math.round(Math.random()*255);
58
      this.b = Math.round(Math.random()*255); 
59
     }
60
  }
61
  
62
  function ParticleAnimation(){
63
    surface.globalCompositeOperation = "source-over";
64
    surface.fillStyle = "black";
65
    surface.fillRect(0, 0, canvasWidth, canvasHeight);
66
    surface.globalCompositeOperation = partState;
67
    
68
    for(var i = 0; i < particles.length; i++)
69
    {
70
      var p = particles[i];
71
      surface.beginPath();
72
73
      p.opacity = Math.round(p.death/p.life*100)/100
74
      var gradient = surface.createRadialGradient(p.location.x, p.location.y, 0, p.location.x, p.location.y, p.radius);
75
      gradient.addColorStop(0, "rgba("+p.r+", "+p.g+", "+p.b+", "+p.opacity+")");
76
      gradient.addColorStop(0.5, "rgba("+p.r+", "+p.g+", "+p.b+", "+p.opacity+")");
77
      gradient.addColorStop(1, "rgba("+p.r+", "+p.g+", "+p.b+", 0)");
78
      surface.fillStyle = gradient;
79
      surface.arc(p.location.x, p.location.y, p.radius, Math.PI*2, false);
80
      surface.fill();
81
      p.death--;
82
      p.radius++;
83
      p.location.x += (p.speed.x);
84
      p.location.y += (p.speed.y);
85
      
86
      if(p.death < 0 || p.radius < 0){
87
        particles[i] = new particle();
88
      }
89
    }
90
91
  requestAnimFrame(ParticleAnimation);
92
93
}
94
95
ParticleAnimation();
96
97
});
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

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