jquery - 如何使用 HTML5 Canvas 复制 'skid marks'？

Question

我一直在用 HTML5 Canvas 创建一个带有一些基本运动的汽车的小实验，这里是:(移动汽车的箭头键)

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

我一直想弄清楚的想法是创建防滑标记的最佳方法。如果您按住向上键并转动，您会看到它创建了一些标记，但如果您再次这样做，它们就会连接在一起。显然我这样做的方式并不理想。它将坐标推送到一个数组，然后使用 lineTo 链接这些坐标。

问题: - 线路连接起来 - 将坐标插入数组以记住打滑可能不是最好的方法 - 我只有一行，所以当我添加另一行时，性能会进一步下降。

你有什么建议？

偷偷摸摸的问题:除了固定背景，什么是让场景“平移”的最佳方式。

谢谢， 亨利

Answer 1

试试这个 http://jsfiddle.net/mpxML/34/ .

我添加了 MIN_DIST_TO_DRAW_SKID 变量。如果 skidMarks 中的两个点比该值更远，则 Canvas 不会画线(只需调用 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)]);
    }

    //....
}