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

最新推荐文章于 2021-11-26 19:53:47 发布

never123450

最新推荐文章于 2021-11-26 19:53:47 发布

阅读量7.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5 文章标签：动画 HTML5

本文链接：https://blog.youkuaiyun.com/nevergiveup12345/article/details/47360575

HTML5 专栏收录该内容

2 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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