gpt4 book ai didi

javascript - Meteor 移动 Canvas 不适合屏幕

转载 作者:行者123 更新时间:2023-11-30 15:54:30 25 4
gpt4 key购买 nike

我正在试用 meteor 的 meteor run android-device。我有以下简单的 html:

<body>
<canvas id='id'></canvas>
</body>

css:

html, body {
margin: 0;
padding: 0;
}

canvas {
width: 100vw;
height: 100vh;
position: absolute;
}

给出了这个输出: enter image description here

enter image description here

这不是我要找的。我希望我的 WebGl 不会被不同的屏幕尺寸拉伸(stretch)。WebGL 代码:

var canvas = this.find('#id');
if (!canvas) {
console.log('Strange Error occured');
return;
}
var gl = canvas.getContext('webgl');
if (!gl) {
console.log("gl not supported");
return;
}


gl.clearColor(0.4, 0.7, 0.9, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
renderTriangle();

那么我该如何实现,如果我绘制的东西在不相对于我的屏幕尺寸的情况下被渲染,或者如果是这样,我该如何解决这个问题?注意:我还没有使用 gl.viewport 或任何相机转换

最佳答案

阅读一些怎么样WebGL tutorials

Note : i dont use gl.viewport or any camera transformation YET

这不正是您需要做的吗?

您可能想要 dynamically set the size of the canvas's drawingBuffer否则你会得到拉伸(stretch)的像素。

Canvas 有 2 种尺寸,#1 是绘图缓冲区中的像素数,#2 是它们显示的尺寸。

更改大小后,您需要调用 gl.viewport

WebGL 坐标始终为 +1 到 -1,其他一切由您决定,因此如果您不想拉伸(stretch)三 Angular 形,则需要查看 Canvas 显示的大小(canvas.clientWidth, canvas.clientHeight) 然后用它来为你的三 Angular 形选择合适的裁剪空间坐标。你如何做到这一点完全取决于你。大多数人通过将顶点位置与顶点着色器中的投影矩阵相乘来实现。

如果您正在做 3D,那么您将在 perspective matrix 中设置纵横比 (aspect = canvas.clientWidth/canvas.clientHeight)为您的投影。对于 2D,大多数人可能只使用正交投影。将其设置为显示大小(left = -canvas.clientHeight/2,right = canvas.clientWidth/2,top = -canvas.clientHeight/2,bottom = canvas.clientHeight/2),< strong>不是 drawingBuffer 的大小也会让你的东西不拉伸(stretch)。

关于javascript - Meteor 移动 Canvas 不适合屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38789993/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com