JS - 画布 - 同时画两个画布 - ？喂两个变量？

Question

有问题。作为一名新手，我找到了一个很好的脚本，并将其改写为令我满意的。但是，我想知道是否可以提高以下内存/性能的效率。

首先有点背景。

• 我制作了一个画布，用鼠标输入画线。很基本。
• 使用“canvas2svg”，我可以将画布复制到svg输出/下载。

问题：

现在，这是所有工作。但是我想知道是否可以使下面的代码更有效地提高内存/性能。

“ctx”var绘制在画布上 “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(); 

思考 对于一小块像这样当然，我可以创造一个功能，同时通过VAR和执行。但是，我不得不做很多很多功能，因为我必须为所有与canvas和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);