离线画布

Question

我用帆布做了一个双摆。结果如下：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])   
}

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

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

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

感谢您的建议

Answer 1

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

有两种方法可以解决这个问题。

离线画布

使用名为offscreen canvas（在JavaScript中创建但未添加到DOM中的画布），可以将所有点绘制到其上，然后使用Range("B6").Value = Application.Worksheet.Sum(wkshtArray).Range("B6") wkshtArray= Array("Dec" & numYear, "Nov" & numYear)（可以接受canvas元素）将画布传递给主上下文。

drawImage

分层画布

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

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

Updated jsfiddle

绘制点html画布

1 个答案:

离线画布

分层画布