Question

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

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

现在，在执行过程中，仅在指定的最后一个canvasIndex上绘制线条。意思是，如果按此顺序调用它，

drawLines(0,0);
drawLines(2,0);

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

Answer 1

演示：http://jsfiddle.net/m1erickson/drFV4/

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

var contexts = [];

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

将上下文放在contexts数组中：

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"));

创建drawLines函数：

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

在最后一个画布上绘制线条

1 个答案: