HTML5 canvas 动画基础自学分享 2

发布时间：2020-08-05 22:52:12 作者：QQ844033231
来源：网络阅读：519

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的类.在接下来的学习中,我将自己来建立一个类,用这个类来实验这些效果.

HTML5 canvas 动画基础自学分享 2

相关阅读