html5 -- 内外圆+电流

在内外圆的基础上加入了内部圆电流的效果，颜色也做了改变从原来的金黄渐变黑色改为紫色渐变黑色的效果，感觉好看一点

代码如下：

var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'), r1 = 1, timer, r2 = 5, c_b = 1, g_r = 0, grad, ci = 90, pi = Math.PI / ci, sc = 1, r3 = 49, a1 = [], a2 = [], step = 5, w = 2, tran = 1;

 function init(){
  timer = setInterval(function(){
   clear();
   bigger();
   if(r2 < 10)
    baozha();
   dis();
   create();
   show();
   ctx.restore();
  },20);
 }

 function create(){
  if(a1.length && a2.length) return;
  var xs = -r1, xe = r1, y, c;
  if(xe - xs > 10){
   c = (xe - xs) / step;
   for(var i = 0; i < c; i++){
    xs += step;
    var r = Math.random();
    y = r % 2 && r * step || -r * step;
    a1.push([xs, y]);
    a2.push([xs, y + w]);
   }
  }
 }

 function show(){
  if(a1.length && a2.length){
   ctx.beginPath();
   var _pi = Math.PI / 4;
   ctx.rotate(pi * c_b);
   for(var j = 4; j > 0; j--){
    ctx.fillStyle = 'rgba(255,255,255,' + tran + ')';
    for(var i = 0, a; a = a1[i]; i++){
     ctx[i && 'lineTo' || 'moveTo'](a[0],a[1]);
    }
    for(var i = a2.length - 1, a; a = a2[i]; i--){
     ctx.lineTo(a[0],a[1]);
    }
    ctx.fill();
    if(tran >=0) tran -= 0.1;
    else{
     tran = 1;
     a1 = [];
     a2 = [];
    }
    ctx.rotate(_pi);
   }
  }
 }

 function clear(){
  ctx.clearRect(0,0,400,400);
  ctx.save();
  ctx.translate(200,200);
  grad = ctx.createRadialGradient(0,0,0,0,0,g_r);
  grad.addColorStop(0,'gray');
  grad.addColorStop(1,'black');
  ctx.fillStyle = grad;
 }

 //变大
 function bigger(){
  ctx.beginPath();
  ctx.arc(0,0,r1,0,Math.PI*2,true);
  r1 < 50 && (r1 += 2, g_r = r1);
  ctx.fill();
 }

 //爆炸
 function baozha(){
  if(r1 < 50) return;
  ctx.save();
  ctx.rotate(pi * c_b);
  var x1, x2, y2, y2;
  for(var i = ci * 2; i > 0; i--){
   ctx.rotate(pi);
   ctx.beginPath();
   ctx.moveTo(r1,0);
   if(i * 2 % ci == 0){
    y1 = Math.sin(pi * 5) * r1;
    x1 = Math.cos(pi * 5) * r1;
    x2 = (r1 - x1) / 2 + r1 + r2 * 2;
   }
   else{
    y1 = Math.sin(pi) * r1;
    x1 = Math.cos(pi) * r1;
    x2 = (r1 - x1) / 2 + r1 + r2;
   }
   y2 = y1 / 2;
   ctx.lineTo(x2,y2);
   ctx.lineTo(x1,y1);
   ctx.fill();
  }
  if(r2 < 10){
   r2 += 0.5;
   g_r = r1 + r2 * 2;
  }
  c_b = c_b + 1;
  ctx.restore();
 }

 //逐渐消失
 function dis(){
  if(r1 < 50 || r2 < 10) return;
  ctx.beginPath();
  ctx.fillStyle = 'white';
  ctx.arc(0,0,r3,0,Math.PI*2,true);
  ctx.fill();
  ctx.scale(sc,sc);
  ctx.fillStyle = grad;
  bigger();
  baozha();
  if(sc > 0.1){
   sc -= 0.01;
   r2 += 0.5;
   r3 -= 0.35;
  }
  else{
   clearInterval(timer);
   ctx.restore();
   clear();
  }
 }
 
 //技能启动
 init();