javascript - 在 Canvas 中，拥有单个上下文还是多个上下文更好？

Question

我目前正在开发一个js应用程序。我不是 js 专家，所以我寻求提示。

我的问题是:在具有上下文数组的 Canvas 中进行绘制是一种好的做法(也是性能方面的)，还是最好使用一个包含所有绘图的上下文？

案例1:

for (i = 0; i < 8; i++) {
    contextAr[i] = canvasAr.getContext('2d');
    contextAr[i].beginPath();
    contextAr[i].arc(canvasAr.width / 2, canvasAr.height / 2, ...
}

案例2:

contextAr.beginPath();
contextAr.arc(...);
contextAr.moveTo(...);
contextAr.LineTo(...);

一个简单的例子是将圆分成 4 个四分之一。我应该用单一的上下文来处理抽签还是应该单独处理每个部分。我想我还没有完全理解上下文的含义。是 contextAr[i] = canvasAr.getContext('2d');多余的调用？如果 contextAr[i] 具有相同的元素，我不会感到惊讶。

谢谢。

Answer 1

从同一个 Canvas 元素多次获取 2D 上下文是毫无意义的，因为将返回相同的上下文对象。

From the standard (我的重点)-

Return the same object as was returned the last time the method was invoked with this same first argument.

因此，常见的最佳实践是获取对每个 Canvas 元素的上下文的单个引用并连续使用它。