html5-canvas - 如何在webgl中画出完美的线条

Question

我想用 webgl 画出完美的线条。我没有在渲染器上下文中设置任何东西。我应该启用或设置什么或提供什么选项canvas.getContext来帮助我画一条看起来不错的线？我认为使用线性和其他东西（我不知道）给我一条不像楼梯的线。

canvas = document.getElementById('canvas');
canvas.height = window.innerHeight;
    canvas.width = window.innerWidth;
    gl = canvas.getContext('webgl2',{
        antialias: true,
        depth: false,
        stencil: false
    });
    gl.viewport(0,0,canvas.width,canvas.height);



array = {
  pos: {
    numComponents: 2,
    data: [-0.03, -1  ,  0.03, 1],
  },
};

Program = twgl.createProgramInfo(gl, [
  `#version 300 es
    precision highp float;
    in vec2 pos;
    void main(){gl_Position = vec4(pos, 0.0 , 1.0);}`,
  `#version 300 es
    precision highp float;
    out vec4 Color;
    void main(){Color.xyz = vec3(0.0) ; Color.a = 1.0;}
    `
]);
Attrib = twgl.createBufferInfoFromArrays(gl, array);

obj = {
  type: gl.LINES,
  programInfo: Program,
  bufferInfo: Attrib,
  //count: 1
};
requestAnimationFrame(() => twgl.drawObjectList(gl, [obj]));

<canvas id="canvas"></canvas>
<script src="https://twgljs.org/dist/3.x/twgl.min.js"></script>

提前致谢。

Answer 1

尝试在 CSS样式属性中设置比实际尺寸更好的分辨率（宽度和高度属性） 。例如：

原始尺寸：

尺寸 2x + 款式：

<canvas width=800 height=400 styles="width: 400; height: 200;" id="canvas"/>

两个屏幕截图均由真实屏幕制作且未缩放。

Answer 2

我猜not like stairs你的意思是混叠。根据MDN web docs，您可以在检索 webgl 呈现上下文时打开相应的标志。

假设您有这样的画布：

<canvas id="canvas"></canvas>

您可以通过以下方式打开抗锯齿：

var canvas = document.getElementById('canvas');
var gl = canvas.getContext('webgl',
                 { antialias: true });

如需更多信息，请阅读相应的文档。