是否可以在同一页面上有两个WebGL上下文？

在同一页面上拥有两个WebGL上下文是可能的。WebGL是一种用于渲染2D和3D图形的JavaScript API，它允许您在网页上创建一个硬件加速的图形上下文。要在同一页面上创建两个WebGL上下文，您需要为每个上下文创建一个独立的canvas元素。

以下是一个简单的示例，说明如何在同一页面上创建两个WebGL上下文：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
 <title>Two WebGL contexts</title>
 <style>
    canvas {
      display: block;
      margin: 10px;
    }
  </style>
</head>
<body>
 <canvas id="canvas1" width="200" height="200"></canvas>
 <canvas id="canvas2" width="200" height="200"></canvas>
 <script>
    const canvas1 = document.getElementById('canvas1');
    const canvas2 = document.getElementById('canvas2');

    const gl1 = canvas1.getContext('webgl');
    const gl2 = canvas2.getContext('webgl');

    // 使用gl1和gl2进行绘制操作
  </script>
</body>
</html>

在这个示例中，我们创建了两个独立的canvas元素，并为每个元素获取了一个WebGL上下文。现在，您可以使用gl1和gl2变量分别对这两个上下文进行操作。

需要注意的是，由于每个WebGL上下文都需要独立的GPU资源，因此在同一页面上创建过多的WebGL上下文可能会导致性能下降。在实际应用中，请根据需要合理分配和管理WebGL上下文。