SOURCE

console 命令行工具 X clear

                    
>
console
var canvasdemo = document.getElementById("canvasdemo");
var cxt = canvasdemo.getContext("2d");
var width = canvasdemo.width;
var height = canvasdemo.height;
var getRandomColor = function(){
  return '#' + (Math.random() * 0xffffff << 0).toString(16);
}
function Fox(opts)
{
  this.cxt = opts.cxt || cxt;
  this.y = opts.y;
  this.x = opts.x;
  
  this.num = 0.1;
  this.color = opts.color || getRandomColor();
  this.width = 20;
  this.height = 20;
  
  this.blinkstep = 10;
  this.isHasRabbit = false
  
  this.dir = 1;
}
Fox.prototype = {
  draw: function () {
    var gr = this.cxt.createRadialGradient(this.x,this.y,2,this.x,this.y,15);
    //添加颜色端点
    //var num = Math.random() * 1;
    gr.addColorStop(0,'rgb(255,0,0)');
    gr.addColorStop(this.num,'rgb(255,0,255)');    
    gr.addColorStop(1,'transparent');       
    //应用fillStyle生成渐变
    this.cxt.fillStyle = gr;
    this.cxt.beginPath();
    this.cxt.arc(this.x, this.y, this.width/2 ,0,2*Math.PI);
    this.cxt.fill();
    //this.cxt.fillRect(this.x, this.y, this.width, this.height);
  },
  move : function (x, y) {
    this.x = x;
    this.y = y;
  },
  trace : function (rabbit) {
		//has rabbit, trace
    if (!this.isHasRabbit) return false;
    var tween = new TWEEN.Tween({x: this.x, y: this.y})
      .to(randomPos, this.speed)
      .onUpdate(function() {
        _this.move(this.x, this.y);
      })
      .easing(TWEEN.Easing.Circular.InOut)
    	.onComplete(function () {
        //_this.isMove = false
      })
      .start();
  },
  update : function () {
    this.draw();
    if (this.blinkstep -- <=0) {
      this.dir = -1;
      this.blinkstep = 10;
    }
    if (this.dir ==1 && this.num <=0.9) {
    	this.num+=0.02;
    } else {     
      if (this.num >=0.1 && this.dir == -1) {
         this.num -= 0.02;
      } else {
        this.dir = 1;
        this.num = 0.1;
      }
    }
  }
}
function Rabbit(opts)
{
  this.cxt = opts.cxt || cxt;
  this.y = opts.y;
  this.x = opts.x;
  
  this.color = opts.color || getRandomColor();
}
Rabbit.prototype = {
  draw: function () {
    this.cxt.fillStyle = this.color;
    this.cxt.fillRect(this.x, this.y, 20, 20);
  },
  update : function () {
    this.draw();
  }
}
var aFox = [];
for(var i=0;i<10;i++) {
  var fox = new Fox({
    x : Math.random() * width,
    y : Math.random() * height,
    cxt : cxt,
    color : 'red'
  });
  aFox.push(fox)
}

var rabbit = new Rabbit({
  x : Math.random() * width - 20,
  y : Math.random() * height - 20,
	cxt : cxt,
  color : '#ffffff'
})

function loop(time)
{
  cxt.clearRect(0, 0, width, height);
  for(var i=0;i<10;i++) {
  	aFox[i].update();
  }
  //rabbit.update();
  
  requestAnimationFrame(loop);
  TWEEN.update(time);
}
loop();
<canvas id="canvasdemo" width="500" height="500">您的浏览器暂不支持canvas</canvas>
<!--https://github.com/tweenjs/tween.js/blob/master/src/Tween.js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/16.3.5/Tween.min.js"></script>