1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 7 </head> 8 <body> 9 10 <canvas width="300px;" height="300px" id="canvas"></canvas> 11 12 <div id="coord"></div> 13 <script type="text/javascript"> 14 15 var pos = { x: 10, y: 10 }; 16 var speed = { speedX: 2, speedY: 2 }; 17 18 function Draw() { 19 20 var canvas = document.getElementById("canvas"); 21 var context = canvas.getContext("2d"); 22 context.clearRect(0,0,canvas.clientWidth,canvas.clientHeight); 23 context.fillStyle = "blue"; 24 context.beginPath(); 25 context.arc(pos.x, pos.y, 10, 0, Math.PI * 2, true); 26 context.closePath(); 27 context.fill(); 28 29 pos.x += speed.speedX; 30 pos.y += speed.speedY; 31 32 if (pos.x > canvas.width) { 33 speed.speedX = -(Math.random() * (5 - 1) + 1); 34 } 35 36 if (pos.x < canvas.offsetLeft) { 37 speed.speedX = (Math.random() * (5 - 1) + 1); 38 } 39 40 41 if (pos.y > canvas.height) { 42 speed.speedY = -(Math.random() * (5 - 1) + 1); 43 } 44 if (pos.y < canvas.offsetTop) { 45 speed.speedY = (Math.random() * (5 - 1) + 1); 46 } 47 48 document.getElementById("coord").innerHTML = "X:" + pos.x + " Y:" + pos.y; 49 } 50 // setTimeout(Draw, 1); 51 setInterval(Draw, 1); 52 </script> 53 54 </body> 55 </html>
首次HTML5下 本想画两个球来对对碰的 不过技术有限 - -！