HTML5 Canvas를 사용하여 '스키드 마크'를 어떻게 복제 할 수 있습니까?

Question

나는 몇 가지 기본적인 운동과 자동차의 HTML5 캔버스에 약간의 실험을 작성했습니다는 여기있다 : (화살표 키를 차를 이동)

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

(가) 내가하려고 한 것 같아요 알아 내기가 스키드 마크를 만드는 가장 좋은 방법입니다. 위로 키를 누른 채로 있으면 표시가 나타나지만 다시 표시하면 함께 연결됩니다. 분명히 내가하는 방식은 이상적이지 않습니다. 좌표를 배열로 밀어 넣은 다음 lineTo를 사용하여 좌표를 연결합니다.

문제 : - 선은 최대 연결 - 배열에 좌표,을 누르면하는 스키드는 가장 좋은 방법 하지 않을 수 있습니다 기억 - 나는 단지 하나 개의 라인을 가지고, 그래서 다른를 추가 할 때, 성능이 학습과 고통을 것입니다.

조언 하시겠습니까?

부적절한 질문 : 고정 된 배경 대신에 장면을 '팬'으로 만드는 가장 좋은 방법은 무엇입니까?

감사합니다, 헨리

Answer 1

이 http://jsfiddle.net/mpxML/34/을보십시오.

나는 변수 MIN_DIST_TO_DRAW_SKID을 추가했습니다. skidMarks의 두 점이 그 값보다 멀리 있으면 캔버스는 선을 그 으려하지 않습니다 (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)]); 
    } 

    //.... 
}