Как я могу скопировать «отметки заноса», используя HTML5 Canvas?

Question

Я создавал небольшой эксперимент в HTML5 Canvas для автомобиля с некоторыми базовыми движениями, вот он: (клавиши со стрелками для перемещения машины)

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)]);
    }

    //....
}