1

我有一个球在画布上弹跳，我试图改变球的运动速度，但我没有让它工作。我正在尝试实现速度，就像我在做球的颜色和球的宽度一样，但它不起作用。代码中的 setInterval 改变了速度，但不能让它从 speedx 输入中获取值。

javascript:

function draw(){
 var canvas = document.getElementById('ball');
 context = ball.getContext('2d');
 //context.clearRect(150,50,750,750);
 context.beginPath();
 context.fillStyle="#0000ff";
 context.arc(x,y,10,20,Math.PI*2,true);
  context.closePath();
  lineColor = document.getElementById('lineColor').value;
  lineWidth = document.getElementById('lineWidth').value;
    speed = document.getElementById('speedx').value;
        setInterval(draw,speed); 

        if (lineWidth)
        {
            context.lineWidth=lineWidth;
        }
        if (lineColor)
        {
            context.strokeStyle=lineColor;
            context.stroke();
        }
}

HTML：

      Ball Width: <input type="text" id="lineWidth"></input>
Ball Color: <input type="text" id="lineColor"></input>
Ball Speed X:<input type="text" id="speedx"></input>
4

1 回答 1

1

看起来好像您正在设置一千个计时器而从未停止以前的计时器，因为您使用的是 setInterval 而不是 setTimeout。这基本上每次调用draw时都会创建一个新的计时器，并且每次每个计时器都有一个间隔时都会调用draw。我认为这使它始终以最快的速度运行。

此外，从这段代码中还不清楚 x 和 y 的设置位置。

此外，在每次迭代中查找上下文并不是最佳性能。

于 2012-08-07T17:32:01.750 回答