阿珏酱

<canvas id="my-canvas" width="500px" height="400px" style="border:1px solid red" >Your browser does not support HTML5.</canvas>

<script type="text/javascript">
	<!-- Get the canvas object -->
	var my_canvas = document.getElementById("my-canvas");
	<!-- Get the pen -->
	var my_huabi = my_canvas.getContext("2d");
	var x = 50;
	var y = 50;
	var r = 20;
	function deawBall(x,y){
		<!-- Set the pen color -->
		my_huabi.fillStyle = "green";
		<!-- Start a new path -->
		my_huabi.beginPath();
		<!-- Draw the ball -->
		my_huabi.arc(x, y, r, 0, 2 * Math.PI);
		<!-- Close the path -->
		my_huabi.fill();
	}
	var fx_x = true;//When fx_x is true, move towards the x-axis
	var fx_y = true;//When fx_y is true, move towards the y-axis
	var speen = 1;
	<!-- Timer -->
	window.setInterval("moveBall()", 10);
	function moveBall(){
		<!-- Determine the current direction of the ball -->
		if(fx_x == true){
			x += speen;
			if(x >= 500-r){
				<!-- When reaching the bottom, bounce upwards -->
				fx_x = false;
			}
		}else{
			x -= speen;
			if(x <= 0+r){
				<!-- When reaching the top, bounce downwards -->
				fx_x = true;
			}
		}
		if(fx_y == true){
			y += speen;
			if(y >= 400-r){
				<!-- When reaching the left side, bounce to the right side -->
				fx_y = false;
			}
		}else{
			y -= speen;
			if(y <= 0+r){
				<!-- When reaching the right side, bounce to the left side -->
				fx_y = true;
			}
		}
		<!-- Clear the canvas and redraw -->
		my_huabi.clearRect(0, 0, 500, 400);
		deawBall(x, y);
	}
</script>