Размер холста и WebGL

Этот пример WebGL демонстрирует влияние установки (или отсутствия установки) размера холста на его размер в пикселях CSS, как он отображается в окне браузера.

Влияние размера холста на отрисовку с помощью WebGL

С помощью scissor() и clear() мы можем продемонстрировать, как буфер рисования WebGL зависит от размера холста.

Размер первого холста устанавливается в соответствии с размером, определённым в CSS. Это делается путём присвоения свойству width и height холста значений свойств clientWidth и clientHeight соответственно.

В отличие от этого, для второго холста такого присваивания не выполняется. Внутренние свойства width и height холста остаются на значениях по умолчанию, которые отличаются от фактического размера холста Element в окне браузера.

Эффект становится очевидным при использовании scissor() и clear() для отрисовки квадрата в центре холста, указав его позицию и размер в пикселях. На первом холсте мы получаем ожидаемый результат. На втором квадрат имеет неправильную форму, размер и положение.

<p>Compare the two canvases.</p>
<canvas>Your browser does not seem to support HTML canvas.</canvas>
<canvas>Your browser does not seem to support HTML canvas.</canvas>

body {
  text-align: center;
}
canvas {
  display: inline-block;
  width: 120px;
  height: 80px;
  margin: auto;
  padding: 0;
  border: none;
  background-color: black;
}

window.addEventListener(
  "load",
  () => {
    const [firstCanvas, secondCanvas] = document.getElementsByTagName("canvas");
    firstCanvas.width = firstCanvas.clientWidth;
    firstCanvas.height = firstCanvas.clientHeight;
    [firstCanvas, secondCanvas].forEach((canvas) => {
      const gl =
        canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
      if (!gl) {
        document.querySelector("p").textContent =
          "Failed. Your browser or device may not support WebGL.";
        return;
      }
      gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
      gl.enable(gl.SCISSOR_TEST);
      gl.scissor(30, 10, 60, 60);
      gl.clearColor(1.0, 1.0, 0.0, 1.0);
      gl.clear(gl.COLOR_BUFFER_BIT);
    });
  },
  false,
);

Исходный код этого примера также доступен на GitHub.

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/By_example/Canvas_size_and_WebGL