Question

昨天我已经问过为什么window.requestAnimationFrame()给了我一个错误，感谢用户现在可以使用它。我正在尝试制作一个移动并进入篮筐的球的动画。我正在使用clearRect()功能来清除画布并重新绘制所有内容，以便看起来球移动，但不是我想要的结果，而是在没有任何球的情况下获得静态图像，并且在5秒后球重新出现在篮子。我的猜测是浏览器不会刷新动画直到它完成（我可能是错的，这是我的第一个画布项目）。这是我的代码中给我带来问题

const tabx=800, taby=100; //backboard position
var canvas, ctx;
function init(z){ //z is the status, at the start of the animation is 0, than goes to 1
    document.getElementById("corpo").innerHTML="<canvas id='mycanvas' width='1000' height='600'></canvas><button onclick='start()'>start</button>"
    canvas=document.getElementById("mycanvas");
    ctx=canvas.getContext("2d");

    //backboard
    ctx.beginPath();
    ctx.strokeStyle="black";
    ctx.rect(tabx,taby,180,100);
    ctx.stroke();

    //basket
    ctx.scale(1,0.5);
    ctx.beginPath();
    ctx.arc(890,320,35, 0, 2 * Math.PI, false);
    ctx.stroke();
    ctx.moveTo(855,320);
    ctx.lineTo(865,445);
    ctx.stroke();
    ctx.moveTo(925,320);
    ctx.lineTo(915,445);
    ctx.stroke();
    ctx.scale(1,0.15);
    ctx.beginPath();
    ctx.arc(890,2980,25, 0, 2 * Math.PI, false);
    ctx.stroke();

    ctx.setTransform(1, 0, 0, 1, 0, 0); //setting to default

    if(z==0)
        start();
function start(){
    var x1,y1,a,b,c,denom;

    //generating ball position
    x1=(Math.random()*500)+100;
    y1=(Math.random()*200)+300;

    canvas=document.getElementById("mycanvas");
    ctx=canvas.getContext("2d");

    //setting the medium point of the parabola
    x2=(x1+890)/2;
    y2=((y1+320)/2)-300;

    //setting the final point of the parabola
    x3=tabx+90;
    y3=taby+90;

    //finding the parabola equation
    denom=(x1-x2) * (x1-x3) * (x2-x3);
    a=(x3 * (y2-y1) + x2 * (y1-y3) + x1 * (y3-y2)) / denom;
    b=(x3*x3 * (y1-y2) + x2*x2 * (y3-y1) + x1*x1 * (y2-y3)) / denom;
    c=(x2 * x3 * (x2-x3) * y1+x3 * x1 * (x3-x1) * y2+x1 * x2 * (x1-x2) * y3) / denom;

    drawball(a,b,c,x1,y1);
}
function drawball(a,b,c,x1,y1){
    canvas=document.getElementById("mycanvas");
    ctx=canvas.getContext("2d");

    //drawing the ball
    ctx.beginPath();
    ctx.arc(x1,y1,25,0,2*Math.PI);
    ctx.stroke();

    if(x1<x3){
        sleep(500);
        ctx.clearRect(0, 0, 1000, 600);
        init(1); //calling init() for redrawing without passing through start()
        y1=a*(x1*x1)+b*x1+c;
        x1+=10;

        //drawing the next ball
        window.requestAnimationFrame(function() { drawball(a,b,c,x1,y1) } );
    }
}

如果我删除了clearRect()功能，我会看到一个球朝向篮筐的动画，同时它会留下一串球。谢谢你的帮助。

这是睡眠功能：

function sleep(milliseconds) {
    var start = new Date().getTime();
    for (var i = 0; i < 1e7; i++) {
       if ((new Date().getTime() - start) > milliseconds){
          break;
       }
    }
}

浏览器不会在画布上刷新动画

0 个答案: