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

最新推荐文章于 2026-07-23 13:18:12 发布

原创最新推荐文章于 2026-07-23 13:18:12 发布 · 7.6k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

HTML5

当前文章被收录于：

HTML5

2 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文探讨了在HTML5 canvas中创建一个球体左右移动的动画，遇到的问题是双击开始后，停止按钮失效且动画速度每次双击都会翻倍。作者尝试分析并解决这个问题。

<!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>