html5 canvas酷炫燃烧火环动画特效代码

html5 canvas酷炫燃烧火环动画特效代码

一款html5 canvas酷炫燃烧火环旋转动画特效,看上去是不是就像马戏团表演用的火圈。

使用方法
在页面引入javascript代码

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
radius = 60;
particleSize = 9;
particleVelocity = 1.3;
particleRandomVelocity = 1.2;
particleMultiplier = 4;

radiusSqr = radius*radius
canvas = document.querySelector('canvas');
ctx = canvas.getContext('2d');

(onresize = function(){
  canvas.width = canvas.clientWidth;
  canvas.height = canvas.clientHeight;
  ctx.setTransform(1,0,0,1,canvas.width/2,canvas.height/2);
})();

particles = (function(){
  var max = (1<<16)-1,
      length = 0,
      nextIndex = 0,
      map = new Uint16Array(max),
      x = new Float32Array(max),
      y = new Float32Array(max),
      vx = new Float32Array(max),
      vy = new Float32Array(max),
      life = new Uint16Array(max),
      startLife = new Uint16Array(max),
      each = function(fn){
        for(var i=0;i<length;i++){
          fn(map[i],i);
        }
      },
      remove = function(i){
        length = length >= 0 ? length-1 : 0;
        map[i] = map[length];
      }
  return {
    create: function(conf){
      x[nextIndex] = conf.x || 0;
      y[nextIndex] = conf.y || 0;
      vx[nextIndex] = conf.vx || 0;
      vy[nextIndex] = conf.vy || 0;
      life[nextIndex] = conf.life || 0;
      startLife[nextIndex] = conf.life;
      map[length] = nextIndex;
      length = length === max ? 0 : length+1;
      nextIndex = nextIndex === max ? 0 : nextIndex+1;
    },
    update: function(){
      each(function(i,id){
        x[i] += vx[i];
        y[i] += vy[i];
        var d = x[i]*x[i]+y[i]*y[i],
            dx = x[i]*(1+radius/d)/1000,
            dy = y[i]*(1+radius/d)/1000;
        vx[i] += d<radiusSqr ? dx : -dx;
        vy[i] += d<radiusSqr ? dy : -dy;
        if(--life[i]<0)remove(id);
      });
    },
    draw: function(){
      ctx.fillStyle = '#f73';
      ctx.globalCompositeOperation = 'lighter';
      each(function(i){
        var f = life[i]/startLife[i];
        ctx.globalAlpha = f;
        ctx.beginPath();
        ctx.arc(x[i],y[i],particleSize*(1-f),0,Math.PI*2);
        ctx.fill();
      })
    }
  }
})();

requestAnimationFrame(loop = function(){
  ctx.save();
  ctx.setTransform(1,0,0,1,0,0);
  ctx.clearRect(0,0,canvas.width,canvas.height);
  ctx.restore();
  for(var i=0;i<particleMultiplier;i++){
    var a = Math.random()*Math.PI*2,
        cos = Math.cos(a),
        sin = Math.sin(a);
    particles.create({
      x: cos*radius,
      y: sin*radius,
      vx: -sin*particleVelocity+(Math.random()-0.5)*2*particleRandomVelocity,
      vy: cos*particleVelocity+(Math.random()-0.5)*2*particleRandomVelocity,
      life: 100
    })
  }
  particles.update();
  particles.draw();
  requestAnimationFrame(loop);
});
当前内容只有登录了才能查看,如果您已经注册,请登录
0

发表评论