我们来做一个小球运动的例子：在这个demo中，我们要求连续多次点击小球“开始”按钮，小球运动速度就越来越快。但是还是不完美存在BUG的，经过多次点击“开始”按钮再点击"停止"按钮就停不下来了，这或许是小球移动事件的冲突吧。
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> </head> <body> <canvas id="qiu100" width="500" height="470"></canvas> <script type="text/javascript"> var canvas = document.getElementById("qiu100"); var q = canvas.getContext("2d"); var dir = 100; var height = 450; var width = 500; var exp = 10;//像素移动的位置 function fff() { q.clearRect(0,0,height,width);//清除上一次的痕迹 q.fillStyle = "red"; q.beginPath(); q.arc(50, dir, 35, 0, Math.PI * 2, 2);//球的大小 q.closePath(); q.fill(); dir = dir + exp; if(dir==0||dir==height) { exp = exp * -1; } } </script> <div id="ds"></div> <button onclick="tt=setInterval(fff,20);">开始</button> <button onclick="clearInterval(tt);" >停止</button> </body>