HTML5的canvas实现一个球的左右移动

来源：互联网发布：企查查软件下载编辑：程序博客网时间：2024/05/16 07:31

<!DOCTYPE html> <head> <meta charset=utf-8> <title>HTML5</title><script src="jquery-1.5.1.js"></script></head><body><canvas id="xu" width="500" height="200" ></canvas><div id="ds"></div><br><script type="text/javascript">  var canvas = document.getElementById("xu");  var xx = canvas.getContext("2d");  var dir = 100;  var width = 500;  var height = 200;  var exp = 1;//像素移动的位置，正数的时候向下，负数向上function fff(){ xx.clearRect(0,0,width,height); xx.fillStyle = "blue";//定义颜色 xx.beginPath();//重新开始画，防止冲突重叠 xx.arc(dir,100,20,0,Math.PI*2,1);//x,y坐标,半径,圆周率， xx.closePath();//结束画布，防止冲突重叠 xx.fill();//渲染结束 dir = dir + exp; if(dir == 0 || dir==width){  exp = exp * (-1);//掉头位置 }}  </script> <button onclick="interval=setInterval(fff,10)">开始</button> <button onclick="clearInterval(interval)">停止</button></body> </html>

这个不知道为啥双击开始之后，点停止没有用，而且每双击一次，速度加快（估计是翻倍），这是为什么呢

0 0