如何解决WebGL 画布上下文的像素坐标不同于 2d 上下文画布
我有两幅画布。一个是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 举报,一经查实,本站将立刻删除。