html - 绘制路径点 html canvas

Question

我用 Canvas 做了一个双摆。 这是结果:https://jsfiddle.net/zndo9vh4/

正如你们所见，每次摆的第二部分移动时都会绘制一条轨迹，我的方法是将每个坐标附加到“轨迹”数组。

var trace = []
trace.push([x2,y2]);

然后我通过将每个坐标与最后一个坐标连接起来绘制轨迹:

for (let i = 1; i < trace.length; i++) {
    c.moveTo(trace[i][0], trace[i][1])
    c.lineTo(trace[i-1][0], trace[i-1][1])   
}

我想改进它。到目前为止，我所尝试的只是添加数组中尚不存在的坐标，但这并不是一个很大的改进，因为线条是在每个循环中绘制的

var trace = []
if(trace.includes([x2, y2]) != true){
    trace.push([x2,y2]);
}

我认为可能是一个很好的改进的方法是拥有 2 个 Canvas (我不知道它是否可能)然后绘制每个点但只在那个 Canvas 中绘制所以我不必重新绘制。但我不知道如何实现。

多谢指教

Answer 1

你的改进想法很棒。你确实可以有两个 Canvas !

有两种方法。

离屏 Canvas

使用所谓的 offscreen canvas (在 JavaScript 中创建但未添加到 DOM 的 Canvas )，您可以在其上绘制所有点，然后使用 drawImage(可以接受 Canvas 元素)将 Canvas 传递到主上下文.

var offscreenCanvas = document.createElement('canvas');
var offscreenC = offscreenCanvas.getContext('2d');

offscreenCanvas.width = canvas.width;
offscreenCanvas.height = canvas.height;


// in animate function, draw points onto the offscreen canvas instead
// of the regular canvas as they are added
if(trace.includes([x2, y2]) != true){
  trace.push([x2,y2]);
  var i = trace.length-1;

  if (i > 1) {
    offscreenC.strokeStyle = 'white'
    offscreenC.beginPath();
    offscreenC.moveTo(trace[i][0], trace[i][1])
    offscreenC.lineTo(trace[i-1][0], trace[i-1][1])
    offscreenC.stroke();
  }
}

c.drawImage(offscreenCanvas, 0, 0);

分层 Canvas

离屏 Canvas 方法的缺点之一是您必须在每一帧都将其绘制到主 Canvas 上。您可以通过将两个 Canvas 层叠在一起来进一步改进方法，其中顶部的只是钟摆，底部的是轨迹。

这样，您就不必将屏幕外的 Canvas 重新绘制到主 Canvas 上，从而节省了一些渲染时间。

Updated jsfiddle