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