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" <!-- -->>
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 >
小球的半径<input type="text" value="" />
小球的颜色<input type="text" value="" />
水平方向加速度<input type="text" value="" />
竖直方向加速度<input type="text" value="" />
</div>-->
<canvas id="myCanvas" >
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的类.在接下来的学习中,我将自己来建立一个类,用这个类来实验这些效果.
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。