问题描述
我有两幅画布。一个是2d,另一个是webgl。然而,给他们相同的定位坐标,他们的内容位于不同的地方。即使一个画布的内容应该在另一个画布之上。
如果我这样做:gl.scissor(150,500,100,90);
那么它们会相互重叠,但是当我给它们相同的坐标时,它们位于相同的位置,我怎么能做到这一点。
这是小提琴: https://jsfiddle.net/1L6qdhta/
这是代码:
#canvas1,#canvas2 {
position: absolute;
left: 0;
top: 0;
width: 100%;
border: 1px solid black;
text-align: center;
font-weight: bold;
}
#canvas-wrapper {
Width: 100%;
Height: 80vh;
}
<div id="canvas-wrapper">
<canvas id="canvas1" height="720" width="1280"></canvas>
<canvas id="canvas2" height="720" width="1280"></canvas>
</div>
const canvas1 = document.querySelector("#canvas1");
const gl = canvas1.getContext("webgl");
gl.enable(gl.SCISSOR_TEST);
gl.scissor(150,150,90);
gl.clearColor(0,0.25,0.25);
gl.clear(gl.COLOR_BUFFER_BIT);
const canvas2 = document.querySelector("#canvas2");
const ctx = canvas2.getContext("2d");
ctx.fillStyle = "rgba(255,255,0.25)";
ctx.font = "55px san-serif";
ctx.textAlign = "center";
ctx.fillText("layer 3",150);
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)