*canvas提供画布，大小自定义，js得到画布，从画布对象通过getContext('2d')来得到画笔，然后就可以开始画了
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MoveDemo</title>
<script type="text/javascript">
//注意，此句必须放在方法外边作为全局变量，如果放在方法内部，就会犯下和我一样的错误，导致小球始终无法移动，找了好久都没找到问题。
var dir=0;
//词句也需要放到外边，否则会出现方向无法改变的窘况。
var exp = 3;
function test(){ //该句需要放到方法里边，因为要实时刷新得到画布
var d=document.getElementById("cans").getContext("2d");;
var width=500;
var height=300;
//实时刷新当前时间，由于是测试，没有调整格式
document.getElementById("res").innerHTML=new Date();
//清空画布方法clearRect()
d.clearRect(0,0,width,height)
//指定画笔颜色
d.fillStyle="red";
//画线条，图形等之前的通用方法，告诉浏览器要开始了。
d.beginPath();
//画圆弧，指定了2pi代表画圆
d.arc(50,dir,30,0,Math.PI*2,true);
//闭合路径
d.closePath();
//刷新画布
d.fill();
//朝着y正方向移动
dir += exp;
//碰到边界改变方向
if( dir==0||dir==height)
exp=-exp;
}
var tt;
function b(){
//setinterval(func,mills)方法提供了y移动的主要支持
tt=setInterval("test()",100);
}
function c(){
//清空setinterval()指定的时时刷新
clearInterval(tt);
}
</script>
</head>
<body >
<canvas id="cans" width="500px" height="300px" style="border:1px solid red;">浏览器不支持canvas</canvas>
<div id="res"></div>
<button id="bt1" onclick="b()">begin</button>
<button id="bt2" onclick="c()">stop</button></button>
</body>
</html>