在画布范围内移动的圆点

最新推荐文章于 2024-01-29 17:43:41 发布

King·Forward

最新推荐文章于 2024-01-29 17:43:41 发布

阅读量913

点赞数

分类专栏： HTML5 文章标签： function 360

本文链接：https://blog.csdn.net/wjw_java_android/article/details/7929859

版权

HTML5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<html>
<head><meta charset="utf-8"/></head>
<body οnkeydοwn="test()">
	<canvas id="can" width="400px" height="300px" style="background:black"></canvas>
</body>
<script type="text/javascript">
	var canvas=document.getElementById("can");
	var cxt=canvas.getContext("2d");

	var ballx=20;//x轴坐标
	var bally=20;//y轴坐标
	var banjing=20;//半径
	var bu_x=400;//画布的x轴长
	var bu_y=300;//画布的y轴长
	//步长，步长不能随便定义，必须根据画布的长，宽和半径这三者综合考虑，要不就出屏
	//步长x轴范围=bu_x-2*banjing的公因子  buchang_x=400-2*20=360=1*2*2*2*3*3*5
	//步长y轴范围=bu_y-2*banjing的公因子  buchang_y=300-2*20=260=1*2*5*2*13
	//然后综合这两个公有的取出作为步长,所以公有因子为1,2,5
	var buchang=5;
	drawBall();
	function drawBall(){
		cxt.beginPath();
		cxt.arc(ballx,bally,banjing,0,360,true);
		cxt.fillStyle="red";
		cxt.fill();
		cxt.closePath();
	} 
	//a,s,d,w分别控制左，下，右，上,当触发onkeydown()事件时，
	function test(){
		var code=event.keyCode;//通过事件获取键盘ASC码的值
		switch(code){
			case 87:
				if(bally>banjing){
					bally-=buchang;break;
				}else{
					break;
				}//w,上，上边界封住
			case 68:
				if(ballx+banjing<bu_x){
					ballx+=buchang;break;
				}else{
					break;
				}//d,右,右边界封住
			case 83:
				if(bally+banjing<bu_y){
					bally+=buchang;break;
				}else{
					break;
				}//s,下
			case 65:
				if(ballx>banjing){
					ballx-=buchang;break;
				}else{
					break;
				}//a,左,左边界封住
			default:break;
		}
		cxt.clearRect(0,0,bu_x,bu_y);//清除画布，不加这句话，是另一个效果，哈哈
		drawBall();
	}

</script>
</html>