JavaScript之canvas num.push(x,y); 动画草图（举个栗子，我们把数字“2”给画出来）： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> new document </title> <meta name="generator" content="editplus" charset="utf-8"/> </head> <body> <script src="http://files.cnblogs.com/files/caidupingblogs/JSLINQ.js"type="text/javascript"></script> <script src="http://files.cnblogs.com/files/caidupingblogs/jscex.min.js"type="text/javascript"></script> <canvas style="border: solid 15px #222; background-color: #111; color: #CCC;" width="430" height="450" id="myCanvas"></canvas> <script type="text/javascript"> var canvas=document.getElementById("myCanvas"); var cxt=canvas.getContext("2d"); cxt.fillStyle="#00FF00"; var dropBall=[]; var one=[];one.push({x:3,y:0}); one.push({x:3,y:1}); one.push({x:3,y:2}); one.push({x:3,y:3}); one.push({x:3,y:4}); one.push({x:3,y:5}); one.push({x:3,y:6}); var two=[]; two.push({x:0,y:0}); two.push({x:1,y:0}); two.push({x:2,y:0}); two.push({x:3,y:0}); two.push({x:3,y:1}); two.push({x:3,y:2}); two.push({x:3,y:3}); two.push({x:2,y:3}); two.push({x:1,y:3}); two.push({x:0,y:3}); two.push({x:0,y:4}); two.push({x:0,y:5}); two.push({x:0,y:6}); two.push({x:1,y:6}); two.push({x:2,y:6}); two.push({x:3,y:6}); var three=[]; three.push({x:0,y:0}); three.push({x:1,y:0}); three.push({x:2,y:0}); three.push({x:3,y:0}); three.push({x:3,y:1}); three.push({x:3,y:2}); three.push({x:3,y:3}); three.push({x:2,y:3}); three.push({x:1,y:3}); three.push({x:0,y:3}); three.push({x:3,y:4}); three.push({x:3,y:5}); three.push({x:0,y:6}); three.push({x:1,y:6}); three.push({x:2,y:6}); three.push({x:3,y:6}); var four=[]; four.push({x:0,y:0}); four.push({x:0,y:1}); four.push({x:0,y:2}); four.push({x:0,y:3}); four.push({x:1,y:3}); four.push({x:2,y:3}); four.push({x:3,y:3}); four.push({x:3,y:4}); four.push({x:3,y:5}); four.push({x:3,y:6}); four.push({x:3,y:0}); four.push({x:3,y:1}); four.push({x:3,y:2}); var five=[]; five.push({x:0,y:0}); five.push({x:1,y:0}); five.push({x:2,y:0}); five.push({x:3,y:0}); five.push({x:0,y:1}); five.push({x:0,y:2}); five.push({x:3,y:3}); five.push({x:2,y:3}); five.push({x:1,y:3}); five.push({x:0,y:3}); five.push({x:3,y:4}); five.push({x:3,y:5}); five.push({x:0,y:6}); five.push({x:1,y:6}); five.push({x:2,y:6}); five.push({x:3,y:6}); var six=[]; six.push({x:0,y:0}); six.push({x:1,y:0}); six.push({x:2,y:0}); six.push({x:3,y:0}); six.push({x:0,y:1}); six.push({x:0,y:2}); six.push({x:3,y:3}); six.push({x:2,y:3}); six.push({x:1,y:3}); six.push({x:0,y:3}); six.push({x:3,y:4}); six.push({x:3,y:5}); six.push({x:0,y:6}); six.push({x:1,y:6}); six.push({x:2,y:6}); six.push({x:3,y:6}); six.push({x:0,y:4}); six.push({x:0,y:5}); var seven=[]; seven.push({x:3,y:0}); seven.push({x:3,y:1}); seven.push({x:3,y:2}); seven.push({x:3,y:3}); seven.push({x:3,y:4}); seven.push({x:3,y:5}); seven.push({x:3,y:6}); seven.push({x:0,y:0}); seven.push({x:1,y:0}); seven.push({x:2,y:0}); var eight=[]; eight.push({x:0,y:0}); eight.push({x:1,y:0}); eight.push({x:2,y:0}); eight.push({x:3,y:0}); eight.push({x:0,y:1}); eight.push({x:0,y:2}); eight.push({x:3,y:3}); eight.push({x:2,y:3}); eight.push({x:1,y:3}); eight.push({x:0,y:3}); eight.push({x:3,y:4}); eight.push({x:3,y:5}); eight.push({x:0,y:6}); eight.push({x:1,y:6}); eight.push({x:2,y:6}); eight.push({x:3,y:6}); eight.push({x:0,y:4}); eight.push({x:0,y:5}); eight.push({x:3,y:1}); eight.push({x:3,y:2}); var nine=[]; nine.push({x:0,y:0}); nine.push({x:1,y:0}); nine.push({x:2,y:0}); nine.push({x:3,y:0}); nine.push({x:0,y:1}); nine.push({x:0,y:2}); nine.push({x:3,y:3}); nine.push({x:2,y:3}); nine.push({x:1,y:3}); nine.push({x:0,y:3}); nine.push({x:3,y:4}); nine.push({x:3,y:5}); nine.push({x:0,y:6}); nine.push({x:1,y:6}); nine.push({x:2,y:6}); nine.push({x:3,y:6}); nine.push({x:3,y:1}); nine.push({x:3,y:2}); var zero=[]; zero.push({x:0,y:0}); zero.push({x:1,y:0}); zero.push({x:2,y:0}); zero.push({x:3,y:0}); zero.push({x:0,y:1}); zero.push({x:0,y:2}); zero.push({x:3,y:3}); zero.push({x:0,y:3}); zero.push({x:3,y:4}); zero.push({x:3,y:5}); zero.push({x:0,y:6}); zero.push({x:1,y:6}); zero.push({x:2,y:6}); zero.push({x:3,y:6}); zero.push({x:0,y:4}); zero.push({x:0,y:5}); zero.push({x:3,y:1}); zero.push({x:3,y:2}); function getRandomNumber(min,max){return(min+Math.floor(Math.random()*(max-min+1)))} function getBalls(num){if(num===0){for(i in zero){var result=JSLINQ(one).Count(function(item){return item.x==zero[i].x&&item.y==zero[i].y;});if(result==0){var ball={x:100+zero[i].x*20,y:100+zero[i].y*20,r:8,vx:getRandomNumber(-250,250),vy:getRandomNumber(-150,150)};dropBall.push(ball);}}} if(num===1){for(i in one){var result=JSLINQ(two).Count(function(item){return item.x==one[i].x&&item.y==one[i].y;});if(result==0){var ball={x:100+one[i].x*20,y:100+one[i].y*20,r:8,vx:getRandomNumber(-250,250),vy:getRandomNumber(-150,150)};dropBall.push(ball);}}} if(num===2){for(i in two){var result=JSLINQ(three).Count(function(item){return item.x==two[i].x&&item.y==two[i].y;});if(result==0){var ball={x:100+two[i].x*20,y:100+two[i].y*20,r:8,vx:getRandomNumber(-250,250),vy:getRandomNumber(-150,150)};dropBall.push(ball);}}} if(num===3){for(i in three){var result=JSLINQ(four).Count(function(item){return item.x==three[i].x&&item.y==three[i].y;});if(result==0){var ball={x:100+three[i].x*20,y:100+three[i].y*20,r:8,vx:getRandomNumber(-250,250),vy:getRandomNumber(-150,150)};dropBall.push(ball);}}} if(num===4){for(i in four){var result=JSLINQ(five).Count(function(item){return item.x==four[i].x&&item.y==four[i].y;});if(result==0){var ball={x:100+four[i].x*20,y:100+four[i].y*20,r:8,vx:getRandomNumber(-250,250),vy:getRandomNumber(-150,150)};dropBall.push(ball);}}} if(num===5){for(i in five){var result=JSLINQ(six).Count(function(item){return item.x==five[i].x&&item.y==five[i].y;});if(result==0){var ball={x:100+five[i].x*20,y:100+five[i].y*20,r:8,vx:getRandomNumber(-250,250),vy:getRandomNumber(-150,150)};dropBall.push(ball);}}} if(num===6){for(i in six){var result=JSLINQ(seven).Count(function(item){return item.x==six[i].x&&item.y==six[i].y;});if(result==0){var ball={x:100+six[i].x*20,y:100+six[i].y*20,r:8,vx:getRandomNumber(-250,250),vy:getRandomNumber(-150,150)};dropBall.push(ball);}}} if(num===7){for(i in seven){var result=JSLINQ(eight).Count(function(item){return item.x==seven[i].x&&item.y==seven[i].y;});if(result==0){var ball={x:100+seven[i].x*20,y:100+seven[i].y*20,r:8,vx:getRandomNumber(-250,250),vy:getRandomNumber(-150,150)};dropBall.push(ball);}}} if(num===8){for(i in eight){var result=JSLINQ(nine).Count(function(item){return item.x==eight[i].x&&item.y==eight[i].y;});if(result==0){var ball={x:100+eight[i].x*20,y:100+eight[i].y*20,r:8,vx:getRandomNumber(-250,250),vy:getRandomNumber(-150,150)};dropBall.push(ball);}}} if(num===9){for(i in nine){var result=JSLINQ(zero).Count(function(item){return item.x==nine[i].x&&item.y==nine[i].y;});if(result==0){var ball={x:100+nine[i].x*20,y:100+nine[i].y*20,r:8,vx:getRandomNumber(-250,250),vy:getRandomNumber(-150,150)};dropBall.push(ball);}}}} function draw(num){switch(num){case 1:for(i in one){cxt.arc(100+one[i].x*20,100+one[i].y*20,8,0,Math.PI*2,true);cxt.closePath();} break case 2:for(i in two){cxt.arc(100+two[i].x*20,100+two[i].y*20,8,0,Math.PI*2,true);cxt.closePath();} break case 3:for(i in three){cxt.arc(100+three[i].x*20,100+three[i].y*20,8,0,Math.PI*2,true);cxt.closePath();} break case 4:for(i in four){cxt.arc(100+four[i].x*20,100+four[i].y*20,8,0,Math.PI*2,true);cxt.closePath();} break case 5:for(i in five){cxt.arc(100+five[i].x*20,100+five[i].y*20,8,0,Math.PI*2,true);cxt.closePath();} break case 6:for(i in six){cxt.arc(100+six[i].x*20,100+six[i].y*20,8,0,Math.PI*2,true);cxt.closePath();} break case 7:for(i in seven){cxt.arc(100+seven[i].x*20,100+seven[i].y*20,8,0,Math.PI*2,true);cxt.closePath();} break case 8:for(i in eight){cxt.arc(100+eight[i].x*20,100+eight[i].y*20,8,0,Math.PI*2,true);cxt.closePath();} break case 9:for(i in nine){cxt.arc(100+nine[i].x*20,100+nine[i].y*20,8,0,Math.PI*2,true);cxt.closePath();} break case 0:for(i in zero){cxt.arc(100+zero[i].x*20,100+zero[i].y*20,8,0,Math.PI*2,true);cxt.closePath();} break default:}} var cyc=20;var count=0;var a=80;var t=0;var drawAsync=eval(Jscex.compile("async",function(){while(true){try{if(dropBall.length>100)dropBall.shift();cxt.clearRect(0,0,canvas.width,canvas.height);cxt.beginPath();draw(count%10);for(i in dropBall){cxt.arc(dropBall[i].x,dropBall[i].y,dropBall[i].r,0,Math.PI*2,true);cxt.closePath();dropBall[i].y+=dropBall[i].vy*cyc/1000;dropBall[i].x+=dropBall[i].vx*cyc/1000;if(dropBall[i].r+dropBall[i].y>canvas.height){dropBall[i].vy*=-0.7;dropBall[i].y=canvas.height-dropBall[i].r;} dropBall[i].vy+=a;} cxt.fill();t+=cyc;if(t>=1000){getBalls(count%10);t=0;count++;draw(count%10);}} catch(e){alert(e)} $await(Jscex.Async.sleep(cyc));}})) drawAsync().start();</script> <img id="myCanvas" src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_a.png'></img> </body> </html>
