html 代码
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta charset="UTF-8">
- <title > 小球在固定的区域内运动 </title>
- <style>
- #canvas{
- border:1px solid black;
- }
- </style>
- </head>
- <body>
- <section id ="canvasbox">
- <canvas id="canvas" width="400" height="300">
Your browser does not support the canvas element.
- </canvas>
- </section>
- <script type="text/javascript">
- function initiate(){
- var canvas=document.getElementById("canvas");
- ctx = canvas.getContext('2d');
- x = 0, y =0;
- gameLoop();
- }
- function gameLoop(){
- window.setTimeout(gameLoop,500);
- drawScreen();
- }
- function drawScreen(){
- ctx.beginPath();
- ctx.clearRect(0,0,400,300);
- ctx.fillStyle='white';
- ctx.fillRect(0,0,400,300);
- ctx.fillStyle='red';
- ctx.arc(x,y,5,0,Math.PI*2,false);
- ctx.closePath();
- ctx.fill();
- x=x+10;
- y=y+10;
- }
- window.addEventListener('load',initiate,false);
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/17169/f9fa722b17c18d2ce941d3ce1f836171.html