JS - 画布 - 同时在两个画布上绘制 - ？喂两个变量？

Question

有一个问题。作为一个菜鸟，我找到了一个不错的脚本并重写了它，让我很满意。但我想知道我是否可以使以下内存/性能效率更高。

首先介绍一下背景。

• 我制作了一个画布，用鼠标输入在上面画了一条线。非常基本。
• 使用“canvas2svg”，我能够将画布复制到 svg 输出/下载。

问题：

现在，一切正常。但我想知道是否可以使以下代码更有效地提高内存/性能。

“ctx”变量在画布上绘制 “rttSvg” var 绘制到 svg 文件。

    points.push({ x: e.clientX, y: e.clientY });

    ctx.beginPath();
    ctx.moveTo(points[points.length - 2].x, points[points.length - 2].y);
    ctx.lineTo(points[points.length - 1].x, points[points.length - 1].y);
    ctx.stroke();

    rttSvg.beginPath();
    rttSvg.moveTo(points[points.length - 2].x, points[points.length - 2].y);
    rttSvg.lineTo(points[points.length - 1].x, points[points.length - 1].y);
    rttSvg.stroke();

我可以把这个结合起来吗？像这样的东西？ （菜鸟提前警告：）

  (ctx.rttSvg).beginPath();

想法 对于这样的一小部分，我当然可以创建一个函数，传递两个变量并执行。但是我必须创建很多很多函数，因为我必须为所有与画布和 svg 交互的代码执行此操作。我想内联。

如您所见，我仍然需要围绕 JS 的思考过程。 :)

Answer 1

如果没有更多上下文，很难 100% 确定这是否是一种有效的方法，但您可以将绘图包装在一个函数中，然后调用该函数，将绘图上下文作为参数...

function drawStuff(context) {
    context.beginPath();
    context.moveTo(points[points.length - 2].x, points[points.length - 2].y);
    context.lineTo(points[points.length - 1].x, points[points.length - 1].y);
    context.stroke();
}

然后在适当的地方...

points.push({ x: e.clientX, y: e.clientY });

drawStuff(ctx);
drawStuff(rttSvg);