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

时间:2010-05-28 11:32:06

标签: html5 opengl-es canvas webgl

由于webgl / opengl不支持文本绘图,因此可以使用3D上下文和使用2D上下文的文本绘制来绘制3D对象吗?

4 个答案:

答案 0 :(得分:26)

不,不幸的是没有。

HTML 5 spec表示如果您在已经位于其他context mode的画布元素上调用getContext且两个上下文不兼容,则返回null。< / p>

不幸的是,“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

答案 1 :(得分:13)

如上所述,你不能这样做。

但是,您可以将一个画布放在另一个画布的顶部并分别绘制它们。我以前做过这个,它可以很好地运作。

答案 2 :(得分:5)

使用画布2D将文本创建为纹理,然后在3D中渲染。有关教程,请参阅here

答案 3 :(得分:0)

无论我只是需要故障排除反馈还是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: absolutetopleft协调使用。控件将确保它们共享相同的空间。

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

enter image description here

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处理程序中。