在html画布上绘制点的路径

我用帆布做了一个双摆。 结果如下：

正如你们所看到的，每当钟摆的第二部分移动时，就会画出一条轨迹，我的方法是将每个坐标附加到一个“轨迹”数组中

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

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])   
}

我认为这是一个很好的改进方法，就是使用2块画布（我不知道是否可能），然后在画布上绘制每个点，但只在画布上绘制，这样我就不必重新绘制。但我不知道如何实现这一点

---

感谢您的建议

您的改进想法很棒。你确实可以有两张画布

有两种方法

屏幕外画布 使用所谓的画布（在JavaScript中创建但未添加到DOM中的画布），可以将所有点绘制到画布上，然后使用

drawImage

（可以接受画布元素）将画布传递到主上下文

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

分层画布 屏幕外画布方法的缺点之一是，您必须在每一帧将其绘制到主画布。您可以通过将两张画布层叠在一起来进一步改进该方法，其中顶部的画布只是钟摆，底部的画布是轨迹

这样，您就不必将屏幕外的画布重新绘制到主画布上，并节省一些渲染时间

---

无论如何，您认为通过两个元素的分层可以获得的渲染都必须由CSS绘制完成。就性能而言，可能更糟。谢谢你，我的工作如我所愿，我实施了更多画布。除此之外，我想问我如何移动画布位置？我不确定我是否理解这个问题。准确地移动他们？

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

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