1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2 "http://www.w3.org/TR/html4/loose.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <title>弹跳球</title>
7 <style type="text/css">
8 form{width:330px; margin:20px; background-color:brown; padding:20px;}
9 input:valid{background:green;}
10 input:invalid{background:red;}
11 </style>
12 <script type="text/javascript">
13 //主要搞清楚HTML5渐变里面的几个函数的意思,下面有注释
14 var boxx=20;
15 var boxy=30;
16 var boxwidth=350;
17 var boxheight=250;
18 var ballrad=10;
19 var boxboundx=boxwidth+boxx-ballrad; //虚拟的右边界，为了判断球是否撞墙了，若装墙了则让圆心等于它，因为墙的厚度，即下面的lineWidth已设为球的半径
20 var boxboundy=boxheight+boxy-ballrad;
21 var inboxboundx=boxx+ballrad;
22 var inboxboundy=boxy+ballrad;
23 var ballx=50;
24 var bally=60;
25 var ball2x=200;
26 var ball2y=210;
27 var ballrad2=10;
28 var ctx;
29 var ballvx=4;
30 var ballvy=8;
31 var ball2vx=-5;
32 var ball2vy=9;
33 var grad;
34 var color;
35 var hue=[
36 [255,0,0],[255,255,0],[0,255,0],[0,255,0],[255,0,255]
37 ];
38 function init(){
39 ctx=document.getElementByIdx_x_x("canvas").getContext('2d');
40 ctx.lineWidth=ballrad;
41 grad=ctx.createLinearGradient(boxx,boxy,boxx+boxwidth,boxy+boxheight); //创建一个渐变对象，从x1,y1线性渐变到x2,y2,注意现在并不是显示出来，可想象为最底层的图层
42 for(h=0;h<hue.length;h++){
43 color="rgb("+hue[h][0]+","+hue[h][1]+","+hue[h][2]+")";
44 grad.addColorStop(h/6,color);
45 }
46 ctx.fillStyle=grad;
47 //
48 moveball();
49 setInterval(moveball,100);
50 }
51 function moveball(){
52 ctx.clearRect(boxx,boxy,boxwidth,boxheight);
53 moveandcheck();
54 ctx.beginPath();
55 ctx.arc(ballx,bally,ballrad,0,Math.PI*2,true); //画圆
56 ctx.fill(); //填充
57 ctx.beginPath();
58 ctx.arc(ball2x,ball2y,ballrad2,0,Math.PI*2,true); //画圆
59 ctx.fill(); //填充
60 ctx.fillRect(boxx,boxy,ballrad,boxheight); //左墙 ,函数fillRect()才是在刚createLinearGradient()的基础上选择性的显示，参数给出显示范围
61 //注意区分strokeRect()是用来画线，不是填充
62 ctx.fillRect(boxx+boxwidth,boxy,ballrad,boxheight); //右墙
63 ctx.fillRect(boxx,boxy,boxwidth,ballrad);
64 ctx.fillRect(boxx,boxy+boxheight-ballrad,boxwidth,ballrad);
65 }
66 function moveandcheck(){
67 var nballx=ballx+ballvx;
68 var nbally=bally+ballvy;
69 if(nballx>boxboundx){
70 ballvx=-ballvx;
71 nballx=boxboundx;
72 }
73 if(nballx<inboxboundx){
74 nballx=inboxboundx;
75 ballvx=-ballvx;
76 }
77 if(nbally>boxboundy){
78 ballvy=-ballvy;
79 nbally=boxboundy;
80 }
81 if(nbally<inboxboundy){
82 ballvy=-ballvy;
83 nbally=inboxboundy;
84 }
85 ballx=nballx;
86 bally=nbally;
87 var nball2x=ball2x+ball2vx; //处理第二个球
88 var nball2y=ball2y+ball2vy;
89 if(nball2x>boxboundx){
90 ball2vx=-ball2vx;
91 nball2x=boxboundx;
92 }
93 if(nball2x<inboxboundx){
94 nball2x=inboxboundx;
95 ball2vx=-ball2vx;
96 }
97 if(nball2y>boxboundy){
98 ball2vy=-ball2vy;
99 nball2y=boxboundy;
100 }
101 if(nball2y<inboxboundy){
102 ball2vy=-ball2vy;
103 nball2y=inboxboundy;
104 }
105 ball2x=nball2x;
106 ball2y=nball2y;
107 }
108 function change(){
109 ballvx=Number(f.hv.value);
110 ballvy=Number(f.vv.value);
111 return false;
112 }
113 </script>
114 </head>
115 <body onLoad="init();">
116 <canvas id="canvas" width="400" height="300">
117 Your brower doesn't support HTML5.
118 </canvas>
119 <br />
120 <form name="f" id="f" onsubmit="return change()">
121 Horizontal velocity<input name="hv" id="hv" value="4" type="number" min="-10" max="20" />
122 Vertital velocity<input name="vv" id="vv" value="8" type="number" min="-10" max="20" />
123 <input type="submit" value="Change" />
124 </form>
125 </body>
126 </html>
