如何使用 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)]);
    }

    //....
}