Question

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

首先是一些背景知识。

我制作了一个画布，用鼠标输入画了一条线。非常基本。
使用＆＃34; canvas2svg＆＃34;我能够将画布复制到svg输出/下载。

问题：

现在，这一切都有效。但我想知道我是否可以使下面的代码更具内存/性能效率。

＆＃34; ctx＆＃34; var在画布上绘制＆＃34; rttSvg＆＃34; 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();

思想对于像这样的小块，我当然可以创建一个函数，传递两个变量并执行。但是，我必须创建许多功能，因为我必须为与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);

JS - 画布 - 同时画两幅画布 - 喂两个vars？

1 个答案: