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

setTimeoutの代わりにsetIntervalを使用しているため、前のタイマーを停止せずに1000個のタイマーを設定しているように見えます。これは基本的に、ドローが呼び出されるたびに新しいタイマーを作成し、各タイマーに間隔があるたびにドローが呼び出されます。これにより、常に可能な限り最速の速度で実行できると思います。

また、このコードからは、xとyがどこに設定されているかが明確ではありません。

また、反復ごとにコンテキストを見つけることは、パフォーマンスの面で最適ではありません。

于 2012-08-07T17:32:01.750 に答える