由于webgl / opengl不支持文本绘制,因此可以使用3D上下文绘制3D对象并使用2D上下文绘制文本?
[不幸的是,没有。
HTML 5 spec表示,如果在已经位于不同getContext
中的画布元素上调用context mode,并且两个上下文不兼容,则返回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
如上所述,您不能这样做。
但是您可以将一个画布放在另一个画布上并分别绘制。我以前做过,而且效果很好。
使用画布2D将文本创建为纹理,然后以3D渲染。有关教程,请参见here。
无论我是否需要故障排除反馈或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处理程序中。