1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>test.html</title> 5 <meta charset="UTF-8"> 6 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7 <meta http-equiv="description" content="this is my page"> 8 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9 10 <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 11 <style> 12 #canvas{border:5px solid #111;background:black;} 13 </style> 14 </head> 15 16 <body> 17 <canvas id="canvas" width="960" height="460"></canvas> 18 <input type="button" onclick="addBall()" value="添加小球" /> 19 <script type="text/javascript"> 20 //画布-html5 canvas 21 var context = null; 22 var canvas = null; 23 window.onload = function(){ 24 //获取画板 25 canvas = document.getElementById("canvas"); 26 //获取权限 -- 上下文 27 context = canvas.getContext("2d"); 28 29 setTimeout(drawBall,20);//在指定的毫秒数之后调用指定的函数或计算表达式 30 }; 31 32 //装小球 33 var balls = []; 34 //x,y小球的坐标位置，dx 摩擦系数 dy 重力速度 radius 小球半径 35 function Ball(x,y,dx,dy,radius){ 36 this.x = x; 37 this.y = y; 38 this.dx = dx; 39 this.dy = dy; 40 this.radius = radius; 41 } 42 function addBall(){ 43 var radius = 20; 44 var ball = new Ball(random(canvas.width),random(canvas.height),2,1,radius); 45 balls.push(ball); 46 } 47 function drawBall(){ 48 //清除画布 49 context.clearRect(0,0,canvas.width,canvas.height); 50 //开始画图 51 context.beginPath(); 52 //把所有小球全部添加到画布中 53 for(var i = 0 ; i<balls.length;i++){ 54 var ball = balls[i]; 55 //确定 小球中心点的坐标 56 ball.x += ball.dx; 57 ball.y += ball.dy; 58 59 // ball.dx *= 1; 60 if(ball.y < canvas.height){ 61 ball.dy += 0.55; 62 } 63 64 //边界 65 if(ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0){ 66 ball.dx = -ball.dx; 67 } 68 //边界 69 if(ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0){ 70 ball.dy = -ball.dy; 71 } 72 context.beginPath(); 73 context.fillStyle = randomColor(); 74 context.lineWidth = 5; 75 context.arc(ball.x,ball.y,ball.radius,0,2*Math.PI); 76 context.fill();//填充北京颜色 77 context.stroke();//描绘到画布中 78 } 79 setTimeout(drawBall,20); 80 } 81 function randomColor(){ 82 var r = Math.floor(Math.random()*255); 83 var g = Math.floor(Math.random()*255); 84 var b = Math.floor(Math.random()*255); 85 return "rgb(" + r + "," + g + "," + b + ")"; 86 }; 87 function random(num){ 88 return Math.floor(Math.random()*(num+1)); 89 } 90 </script> 91 </body> 92 </html>