canvas黑洞漩涡（canvas+js）

1、canvas

复制代码<canvas id="canvas"></canvas>
1

2、js代码

复制代码var elements = 1000; // more the merrier

var shiftmod = 1/6; // modifier for the x&y distance between each element: DEFAULT=1
var angle = 37; // degree to rotate the canvas between each element
var scale =  5; // number of elements that would fit in the available height

var colorstep = 0.75; // how quickly to adjust the color each frame
var coloralpha = 0.50; // alpha to render elements in
var colorcap = 255; // maximum color brightness

var rotation = 1/10; // how much to rotate the canvas each frame
var clearScreenAlpha = 0.90; // alpha value for the screen erase each frame

var zoom = 1.50; // zoom level

var triheight = 0.10; // modifier for the triangle height (lower is shorter)

////////////////////

function start()
{
  resize();
  init();
  tick();
}

var colors = new Array(elements);
var increments = new Array(elements);

var size;
var shift;

function init()
{
  var targetheight = canvas.height*zoom; 
  shift = targetheight/elements*shiftmod;
  size = Math.max(1, targetheight/scale);
  
  for( var i = 0; i < elements; i++ )
  {
    increments[i] = 0;

    colors[i] = Math.round(colorcap - colorcap*i/elements);
  }
}

var framesRendered = 0;

function draw() {
  var canvas = document.getElementById("canvas");
  if (canvas.getContext) {
    var context = canvas.getContext("2d");
    
    context.setTransform(1, 0, 0, 1, 0, 0);
    
    clearCanvas(context);
    
    // set the origin
    context.translate(canvas.width/2, canvas.height/2);
    
    // rotate the canvas based on the frame
    context.rotate(2 * Math.PI/360 *framesRendered*rotation);
    
    // draw them all
    for( var i = 0; i < elements; i++ )
    {
      if( getRandom(1, 5) == 1 )
      {
         if( increments[i] !== 0 )
          increments[i] = 0;
         else
          increments[i] = getRandom(-1, 1) * colorstep;
      }
      
      colors[i] += increments[i];
      if( colors[i] < 0 ) { colors[i] = 0; increments[i] = colorstep; } else if( colors[i] > colorcap )
      {
          colors[i] = colorcap;
          increments[i] = -colorstep;
      }
      
      context.fillStyle = "rgba(" + 
        Math.floor(colors[i]) + "," +
        Math.floor(colors[i]) + "," +
        "0, " + coloralpha + ")";
      
      context.rotate(2 * Math.PI/360 * angle);
      
      context.beginPath();
      context.moveTo(i*shift - size/2, size*triheight + i*shift);
      context.lineTo(i*shift, i*shift);
      context.lineTo(i*shift + size/2, size*triheight + i*shift);
      context.closePath();
      context.fill();
    }
    
    framesRendered++;
  }
}

function tick(){
  // draw a frame
  draw();
  
  // trigger the timer for the next frame...
  requestAnimFrame(tick);
}

function clearCanvas(context)
{
  context.fillStyle = "rgba(0, 0, 0, " + clearScreenAlpha + " )";
  context.fillRect (0, 0, canvas.width, canvas.height);
}

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame ||
  window.webkitRequestAnimationFrame   ||
  window.mozRequestAnimationFrame      ||
  window.oRequestAnimationFrame        ||
  window.msRequestAnimationFrame       ||
  function (callback) {
    window.setTimeout(callback, 1000 / 60);
  };
})();

// mafs
function getRandom (min, max) {
    return Math.round(Math.random() * (max - min) + min);
}

function resize(){
  var canvas = document.getElementById("canvas");
  if (canvas.getContext) {
    canvas.width = parseInt(getComputedStyle(document.body).width) - 4;
    canvas.height = parseInt(getComputedStyle(document.body).height) - 4; 
  }   
}

start();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139