// source http://jsbin.com/hekesa

index.html

<canvas id="graphic" width="600" height="400">
Description of the graphic
</canvas>
<script id="jsbin-javascript">
var canvas=document.querySelector('#graphic');
var ctx=canvas.getContext('2d');

var pos={x:0,y:100};
var speed={x:2.5,y:1.6}
function draw(){
  // 清除尾巴
  ctx.clearRect(0,0,600,400);

  // 每帧移动
  pos.x+=speed.x;
  pos.y+=speed.y;
  if(pos.x>600) speed.x=-1+(Math.random()*-2);
  if(pos.y>400) speed.y=-1+(Math.random()*-2);
  if(pos.x<0) speed.x=1+(Math.random()*2);
  if(pos.y<0) speed.y=1+(Math.random()*2);
  
  // 绘制
  ctx.fillStyle="#000";
  ctx.strokeStyle="#aaa"
  ctx.beginPath();
  // Math.PI 表示一个圆的周长与直径的比例，约为 3.14159：
  // Math.PI=π≈3.14159
  ctx.arc(pos.x,pos.y,10,0,Math.PI*2);
  ctx.fill();
  ctx.stroke();
  
  // 循环
  requestAnimationFrame(draw);
  
};

draw();

</script>


<script id="jsbin-source-javascript" type="text/javascript">var canvas=document.querySelector('#graphic');
var ctx=canvas.getContext('2d');

var pos={x:0,y:100};
var speed={x:2.5,y:1.6}
function draw(){
  // 清除尾巴
  ctx.clearRect(0,0,600,400);

  // 每帧移动
  pos.x+=speed.x;
  pos.y+=speed.y;
  if(pos.x>600) speed.x=-1+(Math.random()*-2);
  if(pos.y>400) speed.y=-1+(Math.random()*-2);
  if(pos.x<0) speed.x=1+(Math.random()*2);
  if(pos.y<0) speed.y=1+(Math.random()*2);
  
  // 绘制
  ctx.fillStyle="#000";
  ctx.strokeStyle="#aaa"
  ctx.beginPath();
  // Math.PI 表示一个圆的周长与直径的比例，约为 3.14159：
  // Math.PI=π≈3.14159
  ctx.arc(pos.x,pos.y,10,0,Math.PI*2);
  ctx.fill();
  ctx.stroke();
  
  // 循环
  requestAnimationFrame(draw);
  
};

draw();
</script>

jsbin.hekesa.js

var canvas=document.querySelector('#graphic');
var ctx=canvas.getContext('2d');

var pos={x:0,y:100};
var speed={x:2.5,y:1.6}
function draw(){
  // 清除尾巴
  ctx.clearRect(0,0,600,400);

  // 每帧移动
  pos.x+=speed.x;
  pos.y+=speed.y;
  if(pos.x>600) speed.x=-1+(Math.random()*-2);
  if(pos.y>400) speed.y=-1+(Math.random()*-2);
  if(pos.x<0) speed.x=1+(Math.random()*2);
  if(pos.y<0) speed.y=1+(Math.random()*2);
  
  // 绘制
  ctx.fillStyle="#000";
  ctx.strokeStyle="#aaa"
  ctx.beginPath();
  // Math.PI 表示一个圆的周长与直径的比例，约为 3.14159：
  // Math.PI=π≈3.14159
  ctx.arc(pos.x,pos.y,10,0,Math.PI*2);
  ctx.fill();
  ctx.stroke();
  
  // 循环
  requestAnimationFrame(draw);
  
};

draw();