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>
