Javascript 在最后一块画布上画线

我不熟悉javascript和画布编程。 我有一个函数drawLines（canvasIndex，startPosition），负责在画布上绘制线条。它接受两个参数canvasIndex，它表示我正在绘制的画布，startPosition表示线条的起点。现在我在代码中调用函数。下面显示了我调用函数的方式

<script type="text/javascript">
function drawLines(canvasIndex,startPosition)
{
...
}
drawLines(0,0);
drawLines(1,0);
</script>

它仅在第二个画布上绘制线条，而不是按顺序绘制。我希望它能够通过这种函数调用按顺序绘制。请帮我解决这个问题。

演示：

首先，创建一个数组来保存画布上下文：

function drawLines(canvasIndex,startPosition){
    var ctx=contexts[canvasIndex];
    ctx.beginPath();
    ctx.moveTo(startPosition,10);
    ctx.lineTo(50,50);
    ctx.lineWidth=5;
    ctx.stroke();
}

drawLines(0,0);
drawLines(1,50);
drawLines(2,100);

var上下文=[]

然后获取对画布元素的引用，并为它们创建上下文。

将上下文放入上下文数组中：

HTML:

<canvas id="canvas0" width=100 height=100></canvas>
<canvas id="canvas1" width=100 height=100></canvas>
<canvas id="canvas2" width=100 height=100></canvas>

JavaScript:

var canvas0=document.getElementById("canvas0");
contexts.push(canvas0.getContext("2d"));
var canvas1=document.getElementById("canvas1");
contexts.push(canvas1.getContext("2d"));
var canvas2=document.getElementById("canvas2");
contexts.push(canvas2.getContext("2d"));

最后，根据需要调用函数：

function drawLines(canvasIndex,startPosition){
    var ctx=contexts[canvasIndex];
    ctx.beginPath();
    ctx.moveTo(startPosition,10);
    ctx.lineTo(50,50);
    ctx.lineWidth=5;
    ctx.stroke();
}

drawLines(0,0);
drawLines(1,50);
drawLines(2,100);

---

非常感谢你！！！一个简单的问题，这个问题是因为javascript中的“循环中的闭包”吗？还是因为找不到推荐人？不客气！很难说为什么最后一块画布在没有看到更多代码的情况下获得了所有的图形。我怀疑，因为绘图正在进行中——但在错误的画布上，范围（闭包）不是您的问题。