<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>运动的小球</title>
<style>
body{
background-color: #dddddd;
}
#canvas{
background-color: #ffffff;
margin-top: 10px;
margin-left: 20px;
box-shadow: 3px 3px 6px rgba(0,0,0,0.5);
}
#anibtn{
width: 79px;
font-size: 20px;
height: 30px;
letter-spacing: 10px;
text-align: center;
padding: 5px;
background-color: pink;
color: #ffffff;
font-family: "宋体";
}
</style>
</head>
<body>
<input type="button" value="stop" id = "anibtn">
<br>
<canvas id = "canvas" width = "800" height="600">浏览器不支持画布</canvas>
<script src="animation_extend.js"></script>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var canv = canvas.getContext("2d");
var x = 150,y = 250;
var dx = 5,dy = 2;
var b = false;
function animate(){
if(b){
canv.clearRect(0,0,800,600);
canv.beginPath();
canv.arc(x,y,25,0,Math.PI*2,true);
var grd = canv.createRadialGradient(x,y,0,x,y,25);
grd.addColorStop(0,"white");
grd.addColorStop(0.5,"yellow");
grd.addColorStop(1,"red");
canv.fillStyle = grd;
canv.strokeStyle = "grey";
canv.closePath();
canv.fill();
canv.stroke();
x+=dx;
if(x>775||x<25){
dx = -dx;
}
window.requestAnimationFrame(animate,canvas);
}
y-=dy;
if(y>575||y<25){
dy = -dy;
}
}
animate();
function change(){
b!=b;
var btn = document.getElementById("anibtn");
if(btn.value == "stop"){
btn.value = "停止";
animate();
}else{
btn.value = "运动";
}
}
</script>
</body>
</html>
原文：http://www.cnblogs.com/whatcanido/p/5084042.html