使用 2D 和 3D 上下文的画布 3D 绘图

Posted 2023-03-05

【中文标题】使用 2D 和 3D 上下文的画布 3D 绘图

【英文标题】：Canvas 3D drawing using both 2D and 3D context

【发布时间】：2011-02-25 02:14:14

【问题描述】：

由于 webgl/opengl 不支持文本绘制，所以可以使用 3D 上下文绘制 3D 对象和使用 2D 上下文绘制文本？

【参考方案1】：

使用 2D 画布将文本创建为纹理，然后以 3D 渲染。教程见here。

【讨论】：

但是如果文本是动态更新的，那么文本渲染会变慢。

文本渲染还是很慢。

【参考方案2】：

不，很遗憾没有。

html 5 spec 表示，如果您在已位于不同 context mode 中的画布元素上调用 getContext 并且两个上下文不兼容，则返回 null。

不幸的是“webgl”和“2d”画布不兼容，因此你会得到null：

var canvas = document.getElementById('my-canvas');
var webgl = canvas.getContext("webgl"); // Get a 3D webgl context, returns a context
var twod = canvas.getContext("2d"); // Get a 2D context, returns null

【参考方案3】：

如上所述，您不能这样做。

但是，您可以将一个画布放在另一个画布上，然后分别绘制它们。我以前做过，效果很好。

【讨论】：

欲了解更多信息，请参阅此问题：***.com/questions/3008635/…

【参考方案4】：

我一直在做的，无论是需要故障排除反馈还是 3D 画布上的 2D 文本内容，都只是使用 CSS 将一些 HTML 元素放在画布上。

您可以让一个画布和一组文本字段共享同一个空间，并确保文本字段在顶部，如下所示：

HTML：

<div id="container">
  <canvas id="canvas"></canvas>
  <div id="controlsContainer">
    <label>Mouse Coordinates</label>
      <div>
        <label for="xPos">X</label>
        <span id="xPos"></span>
      </div>
      <div>
        <label for="yPos">Y</label>
        <span id="yPos"></span>
      </div>
  </div>
</div>

CSS：

canvas 
    margin: 0px;
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;


#container 
  position: relative;


#controlsContainer 
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 3;


  #controlsContainer div 
    padding-left: 8px;
  

  #controlsContainer label 
    color: white;
    z-index: 4;
  

  #controlsContainer span 
    color: white;
    z-index: 4;
  

z-index 将确保哪些元素在前面，position: relative 用于容器，position: absolute 与top 和left 用于控件将确保它们共享相同的空间。

我一直很幸运，故障排除反馈非常宝贵。

javascript（本例中为 ES6）的一个示例是：

let xPos = document.getElementById("xPos");
let yPos = document.getElementById("yPos");
let x = event.clientX - containerDiv.offsetLeft -parseInt(window.getComputedStyle(pageBody).getPropertyValue("margin-left"));
let y = event.clientY - containerDiv.offsetTop - parseInt(window.getComputedStyle(pageBody).getPropertyValue("margin-top"));
xPos.innerText = x;
yPos.innerText = y;

我已将其放置在 mousemove 处理程序中。