如何停止闪烁的滚动条并仍然获得最大屏幕尺寸的画布

Question

我试图让我的画布元素占据文档正文的整个宽度/高度，并在正文尺寸发生变化时调整其大小（例如手机从纵向变为横向）。

画布按预期调整大小，但由于某种原因导致滚动条“闪烁”。

let dimensions = {
  w: document.body.clientWidth,
  h: document.body.clientHeight,
};

const log = console.log.bind(console);
const $ = document.querySelector.bind(document);
let canvas;
let ctx;
let screenSizeObserver;
let initialized = false;

function initialize() {
  if (document.visibilityState === "visible" && initialized === false) {
    initialized = true;

    let c = document.createElement("canvas");
    c.id = "canvas";
    document.body.append(c);

    canvas = $("#canvas");
    ctx = canvas.getContext("2d");

    dimensions.w = document.body.clientWidth;
    dimensions.h = document.body.clientHeight;
    canvas.width = dimensions.w;
    canvas.height = dimensions.h;
  }
}

document.addEventListener("DOMContentLoaded", () => {
  document.addEventListener("visibilitychange", initialize);
  initialize();
});

screenSizeObserver = new ResizeObserver(() => {
  //log(document.body.clientWidth);

  dimensions.w = document.body.clientWidth;
  dimensions.h = document.body.clientHeight;
  canvas.width = dimensions.w;
  canvas.height = dimensions.h;
});

screenSizeObserver.observe(document.body);

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background:
        linear-gradient(180deg,
            rgba(0, 191, 254, 1) 10%,
            rgba(252, 252, 252, 1) 100%);
}

canvas {
    box-sizing: border-box;
    position: relative;
    padding: 0;
    margin: 0;
    background: rgba(0, 0, 0, .5);
}

Answer 1

您可以创建一个去抖动短片，并在调整大小完成后设置宽度和高度

let dimensions = {
  w: document.body.clientWidth,
  h: document.body.clientHeight,
};

const log = console.log.bind(console);
const $ = document.querySelector.bind(document);
let canvas;
let ctx;
let screenSizeObserver;
let initialized = false;
let shouldResize = true;

function initialize() {
  if (document.visibilityState === "visible" && initialized === false) {
    initialized = true;

    let c = document.createElement("canvas");
    c.id = "canvas";
    document.body.append(c);

    canvas = $("#canvas");
    ctx = canvas.getContext("2d");

    dimensions.w = document.body.clientWidth;
    dimensions.h = document.body.clientHeight;
    canvas.width = dimensions.w;
    canvas.height = dimensions.h;
  }
}

document.addEventListener("DOMContentLoaded", () => {
  document.addEventListener("visibilitychange", initialize);
  initialize();
});

screenSizeObserver = new ResizeObserver(() => {
  //log(document.body.clientWidth);
  if (shouldResize) {
    shouldResize = false
    dimensions.w = document.body.clientWidth;
    dimensions.h = document.body.clientHeight;
    if (canvas) {
      canvas.width = dimensions.w;
      canvas.height = dimensions.h;
    }

  }
  setTimeout(() => {
    shouldResize = true
  }, 1000)

});

screenSizeObserver.observe(document.body);

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: linear-gradient(180deg, rgba(0, 191, 254, 1) 10%, rgba(252, 252, 252, 1) 100%);
}

canvas {
  box-sizing: border-box;
  position: relative;
  padding: 0;
  margin: 0;
  background: rgba(0, 0, 0, .5);
}