2.canvas模拟重力
上一章中,知道了怎么在canvas中画图,知道了球是怎么运动起来的.那么就来模拟一下球在重力下的运动.思路有2个.
1.设球的初始位置是: x0,y0.时间是t.那么用公式 S = x0 + v0 * t +0.5 * a * t *t;
就是路程 = 初速度*时间 + 1/2*加速度*时间的平方.
我们可以得到客户端的时间,没一帧都用初始点来计算.
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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>小球自由落体</title> <!------------------------------------------------------------------------------> <style type="text/css"> body{margin:0px; background:#154654;} #myCanvas{ border:1px #0000FF solid;} </style> <!------------------------------------------------------------------------------> <script type="text/javascript"> var SCREEN_WIDTH = screen.availWidth; var SCREEN_HEIGHT = screen.availHeight; </script> </head> <body> <canvas id="myCanvas" <!--style="border:1px solid #9C3;" -->> your browser is not support canvas. </canvas> <!----------------------------------------------------------------------------> <script type="text/javascript"> function ballMove(canvasID) { var canvas = document.getElementById(canvasID); //得到canvas canvas.width = SCREEN_WIDTH; canvas.height = SCREEN_HEIGHT; var canvas2D = canvas.getContext("2d"); var refreshRate = ~~(1000/30); //刷新速率 var radius = 100; //园的半径 var ballColor = "rgba(255,255,0,1)" //圆的颜色 var x = 0; //圆心的运动坐标 var y = 0; var x0 = 100; //球的起始位置 var y0 = 600; var yt = 0; //纵坐标时间 var xt = 0; //横坐标时间 var flashT = 0.05; //踩点率 越低越精致 var vx = 100; //求的起始速度,注意方向. var vy = -100; var rate_x = vx; //球的实际速度 var rate_y = vy; var ax = 0; //X方向加速度 var ay = 15; //y方向加速度 var x_off = 10; //x方向移动速度 var y_off = 10; //y方向移动速度 var damping = 0; //球的阻尼效果 var damping_off = 0; var flagx = 1; //标志变量 var flagy = 1; var flag = 1; var carshRight = SCREEN_WIDTH - radius; //碰撞的实际宽度 var carshButtom = SCREEN_HEIGHT - radius; //碰撞的实际高度 var carshLeft = 0 + radius; var carshTop = 0 +radius; stopBall = setInterval( function() { //第一帧 x = x0 + (vx*xt + 0.5*ax*xt*xt); y = y0 + (vy*yt + 0.5*ay*yt*yt); //判断 if(y > carshButtom) //到底了 { y = carshButtom; y0 = carshButtom; if(flag == 1) { vate_y = vy + ay*yt; flag = -1; } vy = vate_y * -1; vate_y = vate_y - damping; damping = damping - damping_off; yt = 0; if(vy > 0) clearInterval(stopBall); //球停止了. //alert(damping); //if(damping <= 9)alert(1);//clearInterval(stopBall); } //画图 canvas2D.beginPath(); 下面两句是清除画布的功能 canvas2D.clearRect(0,0,SCREEN_WIDTH,SCREEN_HEIGHT); canvas2D.arc(x,y,radius,0,Math.PI*2,false); canvas2D.fillStyle = ballColor; canvas2D.fill(); //改变 /* x = x + flagx * x_off; y = y + flagy * y_off; if( (x+radius) > SCREEN_WIDTH || (x-radius) < 0)flagx *= -1; if( (y+radius) > SCREEN_HEIGHT || (y-radius) < 0)flagy *= -1; if( x > carshRight || x < carshLeft)flagx *= -1; if( y > carshButtom || y < carshTop)flagy *= -1;*/ xt = xt + flashT; yt = yt + flashT; /* if(y > carshButtom) //到底了 { if(flagx == 1) { vate_y = vy + 9.8*t; vy = vate_y * -1; t = 0; flagx = -1; } } if(t > 1)flagx = 1;*/ } ,refreshRate); } //canvas 的宽和高默认为 300 * 150,注意设置数值都时候,不用加单位,不用加"PX"; ballMove("myCanvas"); //go canvas painer </script> </body> </html>
这个是用时间来改变的.其实我们可以用向量.自己定义一个向量类,用向量就能实验了.这个时候,小球就能进行自由下落了.我们可以给他的初速度用拖动来控制.例如这样:
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>小球自由落体+拖动</title> <!------------------------------------------------------------------------------> <style type="text/css"> body{margin:0px;} #myCanvas{ border:1px #0000FF solid;} </style> <!------------------------------------------------------------------------------> <script type="text/javascript"> var SCREEN_WIDTH = screen.availWidth; var SCREEN_HEIGHT = screen.availHeight - 150; </script> </head> <body> <!--<div style="margin:0 0 0 80px;float:left;"> 小球的半径<input type="text" value="" /> 小球的颜色<input type="text" value="" /> 水平方向加速度<input type="text" value="" /> 竖直方向加速度<input type="text" value="" /> </div>--> <canvas id="myCanvas" style="border:1px solid #9C3;" > your browser is not support canvas. </canvas> <!----------------------------------------------------------------------------> <script type="text/javascript"> function ballMove(canvasID,x0,y0,vx,vy,ax,ay,radius,damping,flashT) { var canvas = document.getElementById(canvasID); //得到canvas canvas.width = SCREEN_WIDTH; canvas.height = SCREEN_HEIGHT; var canvas2D = canvas.getContext("2d"); var refreshRate = ~~(1000/60); //刷新速率 var radius = radius||30; //园的半径 var ballColor = lineColor//圆的颜色 var x = 0; //圆心的运动坐标 var y = 0; var x0 = x0||500; //球的起始位置 var y0 = y0||300; var yt = 0 //纵坐标时间 var xt = 0 //横坐标时间 var flashT = flashT||0.1; //踩点率 越低越精致 var vx = vx||0; //求的起始速度,注意方向. var vy = vy||0; var rate_x = vx; //球的实际速度 var rate_y = vy; var ax = ax||0; //X方向加速度 var ay = ay||10; //y方向加速度 var x_off = 10; //x方向移动速度 var y_off = 10; //y方向移动速度 var damping = damping||0; //球的阻尼效果 var damping_off = 0.5; var flagx = 1; //标志变量 var flagy = 1; var flag = 1; var carshRight = SCREEN_WIDTH - radius; //碰撞的实际宽度 var carshButtom = SCREEN_HEIGHT - radius; //碰撞的实际高度 var carshLeft = 0 + radius; var carshTop = 0 +radius; stopBall = setInterval( function() { //第一帧 x = x0 + (vx*xt + 0.5*ax*xt*xt); y = y0 + (vy*yt + 0.5*ay*yt*yt); //判断 if(y > carshButtom) //到底了 { y = carshButtom; y0 = carshButtom; if(flag == 1) { vate_y = vy + ay*yt; flag = -1; } vy = vate_y * -1; vate_y = vate_y - damping; damping = damping - damping_off; if(damping < 0)damping = 0; yt = 0; if(vy > 0) clearInterval(stopBall); //球停止了. //alert(damping); //if(damping <= 9)alert(1);//clearInterval(stopBall); } //画图 canvas2D.beginPath(); 下面两句是清除画布的功能 canvas2D.clearRect(0,0,SCREEN_WIDTH,SCREEN_HEIGHT); canvas2D.arc(x,y,radius,0,Math.PI*2,false); canvas2D.fillStyle = ballColor; canvas2D.fill(); //改变 /* x = x + flagx * x_off; y = y + flagy * y_off; if( (x+radius) > SCREEN_WIDTH || (x-radius) < 0)flagx *= -1; if( (y+radius) > SCREEN_HEIGHT || (y-radius) < 0)flagy *= -1; if( x > carshRight || x < carshLeft)flagx *= -1; if( y > carshButtom || y < carshTop)flagy *= -1;*/ xt = xt + flashT; yt = yt + flashT; //最后一帧 if(isDown) { clearInterval(stopBall); //重新绘图 canvas2D.beginPath(); 下面两句是清除画布的功能 canvas2D.clearRect(0,0,SCREEN_WIDTH,SCREEN_HEIGHT); canvas2D.arc(evt.clientX,evt.clientY,radius,0,Math.PI*2,false); canvas2D.fillStyle = ballColor; canvas2D.fill(); } /* if(y > carshButtom) //到底了 { if(flagx == 1) { vate_y = vy + 9.8*t; vy = vate_y * -1; t = 0; flagx = -1; } } if(t > 1)flagx = 1;*/ } ,refreshRate); //alert(1); } </script> <script type="text/javascript"> var x0 = 0; var y0 = 0; var ballX = 0; var ballY = 0; var x1 = 0; var y1 = 0; var upX = 0; var upY = 0; var evt,evt1,evt2; var startTime = 0; var stopTime = 0; var getvx = 0; var getvy = 0; var isDown = false; var radius = 30; var canvas = document.getElementById("myCanvas"); //得到canvas var canvas2D = canvas.getContext("2d"); var lineColor = canvas2D.createLinearGradient(0,0,1366,768); lineColor.addColorStop(0,"rgba(0,0,0,1)"); lineColor.addColorStop(0.2,"rgba(120,0,0,1)"); lineColor.addColorStop(0.4,"rgba(0,120,0,1)"); lineColor.addColorStop(0.6,"rgba(0,0,255,1)"); lineColor.addColorStop(0.8,"rgba(125,45,0,1)"); lineColor.addColorStop(1,"rgba(45,86,111,1)"); var ballColor = lineColor; canvas.width = SCREEN_WIDTH; canvas.height = SCREEN_HEIGHT; function getOldMouseXY() { evt = event || window.event; x0 = evt.clientX; y0 = evt.clientY; isDown = true; //alert(ball.getBoundingClientRect().left); ballX = x0; ballY = y0; //画图 //alert(1); canvas2D.beginPath(); 下面两句是清除画布的功能 canvas2D.clearRect(0,0,SCREEN_WIDTH,SCREEN_HEIGHT); canvas2D.arc(x0,y0,radius,0,Math.PI*2,false); canvas2D.fillStyle = ballColor; canvas2D.fill(); //alert(ballY); startTime = new Date(); } function getNewMouseXY() { evt1 = event || window.event; //alert(upX+","+upY+" "+x1+","+y1); //速度计算 stopTime = new Date(); var timeOff = stopTime.getTime() - startTime.getTime(); getvx = ~~((x1 - x0)*100/timeOff); getvy = ~~((y1 - y0)*100/timeOff); //alert(getvx+","+getvy); // alert(timeOff); //画图 ballMove("myCanvas",x1,y1,getvx,getvy,0,10,radius,10); isDown = false; } function dragBall() { evt2 = event || window.event; if(isDown) //是否按下了鼠标左键 { x1 = evt2.clientX; y1 = evt2.clientY; var dragX = x1-x0+ballX; var dragY = y1-y0+ballY; //画图 canvas2D.beginPath(); 下面两句是清除画布的功能 canvas2D.clearRect(0,0,SCREEN_WIDTH,SCREEN_HEIGHT); canvas2D.arc(dragX,dragY,radius,0,Math.PI*2,false); canvas2D.fillStyle = ballColor; canvas2D.fill(); } } </script> <script type="text/javascript"> //var ball = document.getElementById("myCanvas"); = getOldMouseXY; //注意给一个事件赋值的时候,不用加括号. = dragBall; = getNewMouseXY; </script> </body> </html>
这样就小球就能用鼠标进行初始度的开始了.可是现在我们没有实现什么类啊,没有用到JS的类.在接下来的学习中,我将自己来建立一个类,用这个类来实验这些效果.
转载于:https://blog.51cto.com/844033231/1206986