JSDM

HTML

 
1
<canvas></canvas>

CSS

xxxxxxxxxx
2
 
1
* {margin: 0; padding: 0;}
2
canvas { display: block;}
? ?
? ?
必须是有效的URL
+ 添加另一个资源

JS

x
 
1
function Particle(x, y) {
2
  this.x = x;
3
  this.y = y;
4
  this.radius = 5;
5
  this.color = 'blue)';
6
  this.alpha = 1;
7
  this.angle = Math.random() * Math.PI * 2;
8
  this.speed = 1.2;
9
  this.vx = 0;
10
  this.vy = 0;
11
}
12
13
Particle.prototype.draw = function (ctx) {
14
  ctx.save();
15
  ctx.translate(this.x, this.y);
16
  ctx.globalAlpha = this.alpha;
17
  ctx.strokeStyle = 'rgba(255, 255, 255, .4)';
18
  ctx.fillStyle = this.color;
19
  ctx.beginPath();
20
  ctx.arc(0, 0, this.radius, 0, Math.PI * 2, true);
21
  ctx.closePath();
22
  ctx.fill();
23
  ctx.stroke();
24
  ctx.restore(); 
25
};
26
27
var canvas = document.querySelector('canvas'),
28
    ctx = canvas.getContext('2d'),
29
    W = canvas.width = window.innerWidth,
30
    H = canvas.height = window.innerHeight,
31
    particles = [],
32
    mainParticle = new Particle(W / 2 - 300, H / 2 -100),
33
    targetX = W / 2,
34
    targetY = H / 2;
35
36
37
mainParticle.vx = 7;
38
mainParticle.vy = 7;
39
mainParticle.color = 'rgba(0, 0, 0, 0)';
40
41
function drawParticle(particle) {
42
  particle.draw(ctx);
43
  setTimeout(function() {
44
    particle.vx = Math.sin(particle.angle) * particle.speed;
45
    particle.vy = Math.cos(particle.angle) * particle.speed;
46
    particle.x += particle.vx;
47
    particle.y += particle.vy;
48
    if (particle.radius > .02) {
49
      particle.radius -= .02;
50
    } 
51
    if (particle.alpha > .01) {
52
      particle.alpha -= .01;
53
    } 
54
  }, 700);
55
}
56
57
function animateMainParticle() {
58
  var particle = new Particle(mainParticle.x, mainParticle.y);
59
  particle.color = 'rgba(52, 152,' +  (150 + Math.round(Math.random() * 105 )) + ', 1)';
60
  particle.radius = 4;
61
  particle.alpha = 1;
62
  particles.push(particle);
63
64
  var dx = targetX - mainParticle.x,
65
      dy = targetY - mainParticle.y;
66
  mainParticle.speed = .01;
67
  mainParticle.vx += dx * mainParticle.speed;
68
  mainParticle.vy += dy * mainParticle.speed;
69
  mainParticle.x += mainParticle.vx;
70
  mainParticle.y += mainParticle.vy;
71
72
  mainParticle.draw(ctx);
73
}
74
75
(function drawFrame(){
76
  window.requestAnimationFrame(drawFrame, canvas);
77
  ctx.fillStyle = 'rgba(23, 41, 58, .55)';
78
  ctx.fillRect(0, 0, W, H);
79
  particles.forEach(drawParticle);
80
  animateMainParticle();
81
}());
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

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