<!DOCTYPE html> <head> <title>canvas</title> <style> .canvas{ border: 1px solid #000; } </style> </head> <body> <canvas class="canvas" id="canvas" width="400px" height="400px"></canvas> <script> window.onload=function(){ var can=document.getElementById("canvas"); var cxt=can.getContext("2d"); var ball={ x:100, y:100, vx:4, vy:2, radius:20, color:"blue", draw:function(){ cxt.beginPath(); cxt.arc(this.x,this.y,this.radius,0,Math.PI*2,true); cxt.closePath(); cxt.fillStyle=this.color; cxt.fill(); } }; var draw=function(){ cxt.clearRect(0,0,canvas.width,canvas.height); ball.draw(); ball.x+=ball.vx; ball.y+=ball.vy; if(ball.vy+ball.y>canvas.height-15 || ball.vy+ball.y<15){ ball.vy=-ball.vy; } if(ball.vx+ball.x>canvas.width-15 || ball.vx+ball.x<15){ ball.vx=-ball.vx; } window.requestAnimationFrame(draw); //window.setTimeout(function(){ // draw(); //},100); }; draw(); }; </script> </body> </html>
