JSDM

HTML

 
1
<canvas></canvas>

CSS

xxxxxxxxxx
3
 
1
canvas{
2
  background-color: #000000;
3
}
? ?
? ?
必须是有效的URL
+ 添加另一个资源

JS

x
 
1
// Targeted Lightning, a lightning which will try to go to the specified target position, but has a random factor to define where it actually jumps to.
2
//Made by Boomer Shin
3
4
/*
5
  Color functions, forked from some animation which was forked from http://andreasstorm.com/ once, long ago. 
6
  Those are very handy for random colors, you know? 
7
*/
8
function Color(min) {
9
  min = min || 0;
10
  this.r = colorValue(min);
11
  this.g = colorValue(min);
12
  this.b = colorValue(min);
13
  this.style = createColorStyle(this.r, this.g, this.b);
14
};
15
16
function colorValue(min) {
17
  return Math.floor(Math.random() * 255 + min);
18
};
19
20
function createColorStyle(r,g,b) {
21
  return 'rgba(' + r + ',' + g + ',' + b + ', 0.8)';
22
};
23
24
/*
25
  Other utility functions
26
*/
27
28
function distance2dPositions(dx, dy){
29
  return Math.sqrt(dx*dx + dy*dy);
30
  
31
};
32
33
function distance2dCoordinates(x1, x2, y1, y2){
34
  var dx = x2 - x1;
35
  var dy = y2 - y1;
36
  var dist = Math.sqrt( dx*dx + dy*dy );
37
  return dist;
38
};
39
40
/*
41
  Config
42
*/
43
44
45
var minX = 0;
46
var maxX = window.innerWidth;
47
var minY = 0;
48
var maxY = window.innerHeight;
49
50
/*
51
  Proper Lightning
52
*/
53
54
function TargetedLightning(trailSize, target){
55
  var self = this;
56
  self.px = 0;
57
  self.py = 0;
58
  self.color = new Color(128);
59
  
60
  self.target = target;
61
  self.trailSize = trailSize;
62
  self.trail = [];
63
  for(var i = 0; i < self.trailSize; i++){
64
    self.trail.push({px: self.px, py: self.py});
65
  }
66
  
67
  self.jumpLength = 15;
68
  self.deltaJumpLength = 15;
69
  self.disturbLength = self.jumpLength * 2/ 3;
70
  self.deltaDisturbLength = self.deltaJumpLength * 2 / 3;
71
  
72
  // Anything with a px and py values
73
  self.setTarget = function(target){
74
    self.target = target;
75
  };
76
  
77
  self.update = function(){
78
    var dxTarget = self.target.px - self.px;
79
    var dyTarget = self.target.py - self.py;
80
    var dist = distance2dPositions(dxTarget, dyTarget);
81
82
    var randomAngle = Math.random() * Math.PI;
83
    var disturbLength = self.disturbLength + Math.random() * self.deltaDisturbLength;
84
    var jumpLength = self.jumpLength + self.deltaJumpLength * Math.random();
85
    // if close enough, goes exatly to the target. No disturbances!
86
    if(dist < (self.jumpLength + self.deltaJumpLength)){
87
      disturbLength = 0;
88
      jumpLength = dist;
89
      self.reachTarget();
90
    }
91
    
92
    
93
94
    var finalDx = ((dxTarget / dist) * jumpLength ) + disturbLength * Math.cos(randomAngle);
95
    var finalDy = ((dyTarget / dist) * jumpLength ) + disturbLength * Math.sin(randomAngle);
96
97
    self.px += finalDx;
98
    self.py += finalDy;
99
    self.trail.pop();
100
    self.trail.unshift({px: self.px, py: self.py});
101
  };
102
  
103
104
  self.draw = function(ctx){
105
      ctx.beginPath();
106
      ctx.moveTo(self.px, self.py);
107
      for(var i = 0; i < self.trail.length; i++){
108
        ctx.lineTo(self.trail[i].px, self.trail[i].py);
109
      }
110
      ctx.strokeStyle = self.color.style;
111
      ctx.lineWidth = 3;
112
      ctx.stroke();
113
    
114
      ctx.beginPath();
115
      //ctx.moveTo(self.target.px, self.target.py);
116
      ctx.arc(self.target.px, self.target.py, 10, 0, Math.PI * 2, false);
117
      ctx.strokeStyle = this.color.style;
118
      ctx.stroke();
119
  };
120
121
  // Selects a new target position
122
  self.reachTarget = function(){
123
    var newTarget = {
124
      px: Math.random() * maxX,
125
      py: Math.random() * maxY
126
    };
127
    self.setTarget(newTarget);
128
  }
129
  
130
};
131
132
$(function(){
133
  var self = this;
134
  self.canvas = document.querySelector('canvas');
135
  self.ctx = self.canvas.getContext('2d');
136
  self.canvas.width = window.innerWidth;
137
  self.canvas.height = window.innerHeight;
138
139
  self.lightnings = [];
140
141
  self.updateAll = function(){
142
    for(var i = 0; i < self.lightnings.length; i++){
143
      self.lightnings[i].update();
144
    }
145
  };
146
147
  self.drawAll = function(){
148
    for(var i = 0; i < self.lightnings.length; i++){
149
      self.lightnings[i].draw(self.ctx);
150
    }
151
  };
152
153
  self.animationCycle = function(){
154
    self.ctx.clearRect(0, 0, self.canvas.width, self.canvas.height);
155
    self.updateAll();
156
    self.drawAll();
157
158
    requestAnimationFrame(self.animationCycle);
159
  };
160
161
  self.initApp = function(){
162
    for(var i = 0; i < 2; i++){
163
      self.lightnings.push(new TargetedLightning(15, {px: self.canvas.width / 2, py: self.canvas.height / 2}));
164
    }
165
  };
166
167
  self.initApp();
168
  requestAnimationFrame(self.animationCycle);
169
  
170
});
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

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