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>