0

我使用 Two.js 编写了一个简单的弹跳球动画。这只是一个从墙上弹起的球。它在 Chrome 中对我来说工作得很好，但在 Firefox 中，球消失并在几秒钟后重新出现在屏幕的另一部分，这意味着球正在移动，只是随机变得短暂不可见。

这是我的代码：

var elem=document.querySelector("div");
var h=window.innerHeight;
var w=window.innerWidth;
var two=new Two({fullscreen: true}).appendTo(elem);
var vy=5, vx=5;

var circle1=two.makeCircle(300,200,50);
circle1.fill="orange";
circle1.stroke="purple";
circle1.linewidth=5;

two.bind("update", function(frameCount){
    circle1.translation.x+=vx;
    circle1.translation.y+=vy;
    if(circle1.translation.x+30>w||circle1.translation.x-30<0){
        vx*=-1;
        circle1.translation.x+=vx;
    }
    if(circle1.translation.y+30>h||circle1.translation.y-30<0){
        vy*=-1;
        circle1.translation.x+=vy;
    }
}).play();

JSFiddle 示例

同样，同样的事情在 Chrome 中也能正常工作。

此外，如果我用画布替换 div 并改用它，它在 Chrome 和 Firefox 中都可以正常工作：

var canvas=document.querySelector("canvas");
var w=window.innerWidth, h=window.innerHeight;
canvas.width=w;
canvas.height=h;
var context=canvas.getContext("2d");
var vx= 5, vy=5;

var ball={
    x: 300,
    y: 200,
    radius: 50
};

function draw(){
    context.fillStyle="orange";
    context.beginPath();
    context.arc(ball.x,ball.y,ball.radius,0,Math.PI*2,false);
    context.closePath();
    context.fill();
}

(function animate(){
    var timer=setInterval(function(){
        context.clearRect(0,0,w,h);
        ball.x+=vx;
        ball.y+=vy;
        if(ball.x+ball.radius>w||ball.x-ball.radius<0){
            vx*=-1;
            ball.x+=vx;
        }
        if(ball.y+ball.radius>h||ball.y-ball.radius<0){
            vy*=-1;
            ball.y+=vy;
        }
        draw();
    },1000/60);
}());

如果有人能解释这种奇怪的行为，那就太好了。

4

0 回答 0