在画布范围内移动的圆点

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


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

King·Forward

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值