HTML5 Canvasを使用して「スキッドマーク」を複製するにはどうすればよいですか？

Question

私は、いくつかの基本的な動きで車のHTML5キャンバスに少しテストを作成してきたが、ここにある：（矢印キーは車を移動する）

http://jsfiddle.net/mpxML/27/

ザ・私がしようとしてきたと思いますスケートマークを作成する最良の方法です。上のキーを押したままにすると、いくつかのマークがつくられているのを見ることができますが、もう一度やり直すと一緒につながります。明らかに、私がやっているやり方は理想的ではありません。これは、座標を配列にプッシュし、次にそれらの座標をリンクするためにlineToを使用しています。

問題： - 行が をリンクアップ - スキッドを覚えて配列にcordinatesをプッシュする最良の方法 ではないかもしれない - 私は別のものを追加するとき、私は1行のみを持っているので、パフォーマンスはfutherを被るだろう。

あなたは何をアドバイスしますか？

卑劣な質問：背景が固定されているのではなく、シーンを「パン」にする最も良い方法は何ですか？

おかげで、 ヘンリー

Answer 1

このhttp://jsfiddle.net/mpxML/34/を試してみてください。

MIN_DIST_TO_DRAW_SKID変数を追加しました。 skidMarksの2点がその値よりも遠い場合、キャンバスは線を描画しません（moveToメソッドを呼び出します）。

// here 
var MIN_DIST_TO_DRAW_SKID = 30; 

function drawStageObjects() { 

    if(car.drift > 30 || car.drift < -30) { 
     skidMarks.push(car.x, car.y); 
    } else { 
    } 

    context.beginPath() 
    context.moveTo(skidMarks[0],skidMarks[1]); 
    for(var i=0; i < skidMarks.length; i = i + 2) { 

     skidPoint = Math.abs(skidMarks[(skidMarks.length-4)]) - Math.abs(skidMarks[(skidMarks.length-2)]); 

     // here 
     var dist = Math.sqrt((skidMarks[i] - skidMarks[i - 2]) * (skidMarks[i] - skidMarks[i - 2]) 
       + (skidMarks[i + 1] - skidMarks[i - 1]) * (skidMarks[i] - skidMarks[i - 1])); 

     if(skidPoint > 20 || dist > MIN_DIST_TO_DRAW_SKID) { 
      context.moveTo(skidMarks[i], skidMarks[i + 1]); 
     } else { 
      context.lineTo(skidMarks[i],skidMarks[i + 1]); 
     } 

     $('#stats').html(skidPoint); 
     //$('#stats').html(skidMarks[(skidMarks.length-4)] + "," +skidMarks[(skidMarks.length-2)]); 
    } 

    //.... 
}