html5 方框内的小球
版本一
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/jquery.js"></script> <script> $(function () { var x=10,y=10,WIDTH,HEIGHT,RADIUS=10; canvas=$("#canvas").get(0); d=canvas.getContext("2d"); //小球方向，默认为1，向右下 var direction=1; WIDTH= canvas.width; HEIGHT= canvas.height; //小球走 setInterval(function () { //1.判断方向，决定小球的横纵坐标 //2.判断方向变化 if(direction==1){ // 右下 x++; y++; if(y>=HEIGHT-RADIUS){ direction=2; } if(x>=WIDTH-RADIUS){ direction=4; } }else if(direction==2){ //右上 x++; y--; if(x>=WIDTH-RADIUS){ direction=3; } if(y<=RADIUS){ direction=1; } }else if(direction==3){ // 左上 x--; y--; if(y<=RADIUS){ direction=4; } if(x<=RADIUS){ direction=2; } }else if(direction==4){ // 左下 x--; y++; if(x<=RADIUS){ direction=1; } if(y>=HEIGHT-RADIUS){ direction=3; } } d.clearRect(0,0,WIDTH,HEIGHT); // 清除之前的canvas d.fillStyle="blue"; d.beginPath(); // 从新开始画，防止 冲突重叠 d.arc(x,y,RADIUS,0,Math.PI*2,true); // x y 坐标 半径30 d.closePath(); // 结束画布，防止冲突重叠 d.fill(); // 结束渲染 },20); }); </script> </head> <body> <canvas id="canvas" width="400" height="300" style="border:1px solid green"></canvas> <span><img src="direction.png" width="400"></span> </body> </html>
版本二
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/jquery.js"></script> <script> $(function () { var x=10,y=10; // 圆坐标 var WIDTH,HEIGHT,RADIUS=10; xx=1;yy=1; // 步长 canvas=$("#canvas").get(0); d=canvas.getContext("2d"); WIDTH= canvas.width; HEIGHT= canvas.height; //小球走 setInterval(function () { if(x < RADIUS || x >= WIDTH-RADIUS){ // 一开始坐标就相等了，要去掉=号 x = radius xx *= -1; } //判断小球纵向边界 if(y < RADIUS || y >= HEIGHT-RADIUS){ yy *= -1; } x += xx; y += yy; d.clearRect(0,0,WIDTH,HEIGHT); // 清除之前的canvas d.fillStyle="blue"; d.beginPath(); // 从新开始画，防止 冲突重叠 d.arc(x,y,RADIUS,0,Math.PI*2,true); // x y 坐标 半径30 d.closePath(); // 结束画布，防止冲突重叠 d.fill(); // 结束渲染 },20); }); </script> </head> <body> <canvas id="canvas" width="400" height="300" style="border:1px solid green"></canvas> <span><img src="direction.png" width="400"></span> </body> </html>
原文：http://www.cnblogs.com/gyz418/p/5379424.html