Javascript 在HTML5画布上同时跟踪两条路径

我的代码在精神上与这段代码相当：

function drawComplicatedThing(ctx) {
    let [px, py] = [0, 0];
    for (let i = 0; i < 10000; i++) {
        let {x, y} = computeExpensive(i);

        // black along
        ctx.beginPath();
        ctx.moveTo(px, py);
        ctx.lineTo(x, y);
        ctx.strokeStyle = 'black';
        ctx.stroke();

        // red transpose
        ctx.beginPath();
        ctx.moveTo(py, px);
        ctx.lineTo(y, x);
        ctx.strokeStyle = 'red';
        ctx.stroke();

        [px, py] = [x, y];
    }
}

---

HTML5中是否存在这种功能，或者我是否需要围绕一次只能跟踪一条笔划路径来构建代码？

您可以尝试调用第二个

getContext

，但即使它起作用，也可以更清楚地将要渲染的点存储到数组中，然后将其传递两次。@JanDvorak。每个画布只有一个上下文，因此多个

getContext

调用始终获得相同且唯一的上下文。您关于缓存昂贵的积分的建议听起来是正确的答案。：-）我怀疑JanDvorak有你的答案，但你可以用两张画布（一张画黑线，一张画红线）并将它们与：

blackContext.drawImage（redCanvas，0,0）

@JanDvorak我在问之前确实试过了。这两个结果相互之间是

==

，所以它只是指同一个上下文。@标记如果将它们放在一起，你甚至不需要将它们组合在一起（顺便提一下，这是一个有趣的想法；我可以自己尝试一下）

function drawComplicatedThing(ctx) {
    // black along
    ctx.moveTo(0, 0);
    for (let i = 0; i < 10000; i++) {
        let {x, y} = computeExpensive(i);
        ctx.lineTo(x, y);
    }
    ctx.strokeStyle = 'black';
    ctx.stroke();

    // red transpose
    ctx.moveTo(0, 0);
    for (let i = 0; i < 10000; i++) {
        let {x, y} = computeExpensive(i);
        ctx.lineTo(y, x);
    }
    ctx.strokeStyle = 'red';
    ctx.stroke();
}

function drawComplicatedThing(ctx) {
    let ctx2 = ctx.independentCopy(); // <-- NOT REAL, but you get the idea
    ctx.moveTo(0, 0);
    ctx2.moveTo(0, 0);
    for (let i = 0; i < 10000; i++) {
        let {x, y} = computeExpensive(i);
        ctx.lineTo(x, y);
        ctx2.lineTo(y, x);
    }
    ctx.strokeStyle = 'black';
    ctx.stroke();
    ctx2.strokeStyle = 'red';
    ctx2.stroke();
}