如何處理 window 調整大小以顯示具有 devicepixelratio 的移動設備的 canvas

Question

我正在嘗試為 javascript canvas 應用程序處理 window 調整大小事件。

當我在瀏覽器上更改寬度時，它似乎工作正常，但如果我打開設備工具欄並更改寬度，寬度不會更改為 980，盡管高度會更改。 並且渲染的對象變得更小。

根據this How to stop chrome responsive inspector from changes the zoom? ，現在當我調整大小時寬度會改變。

我的新問題是渲染的對象在調整大小時仍然看起來更小。 它與window.devicePixelRatio相關。

例如，如果使用此代碼設置用於繪制對象的尺寸：

  this.width = displayWidth;
  this.height = displayHeight;

事物最初正常渲染，並且在調整大小時要小得多。

如果我將此代碼更改為：

  this.width = displayWidth * devicePixelRatio;
  this.height = displayHeight * devicePixelRatio;

最初渲染的東西要大得多，但是如果我在調整大小時使用相同的代碼，則渲染正常。

我在某個地方也有這個：

canvasContext.scale(pixelRatio, pixelRatio);

Canvas javascript：

export default function Canvas(element) {

  const canvas = document.createElement('canvas');

  element.append(canvas);
  const displayWidth = canvas.clientWidth,
        displayHeight = canvas.clientHeight,
        devicePixelRatio = window.devicePixelRatio || 1;

  this.pixelRatio = devicePixelRatio;


  this.width = displayWidth;
  this.height = displayHeight;

  canvas.width = displayWidth * devicePixelRatio;
  canvas.height = displayHeight * devicePixelRatio;

  this.aspect = this.width / this.height;

  this.canvas = canvas;

  this.bounds = canvas.getBoundingClientRect();

  // called on `window.onresize` event
  this.resize = () => {

    const displayWidth = canvas.clientWidth,
          displayHeight = canvas.clientHeight,
          pixelRatio = window.devicePixelRatio || 1;

    this.pixelRatio = pixelRatio;
    this.width = displayWidth;
    this.height = displayHeight;

    canvas.width = displayWidth * pixelRatio;
    canvas.height = displayHeight * pixelRatio;

    this.aspect = this.width / this.height;

    this.bounds = canvas.getBoundingClientRect();

  };

};

css：

#app canvas {
  position: absolute;
  top: 50%;
  bottom: 0;
  left: 50%;
  right: 0;

  width: 100vw;
  height: 100vh;

  transform: translate(-50%, -25%);

  image-rendering: optimizeSpeed;
  cursor: pointer;
  margin: auto;
}

Answer 1

問題是當它調整大小時，canvas 上下文失去了它的比例屬性，所以我不得不再次調用比例。

  ctx.scale(pixelRatio, pixelRatio);
  _canvas.addResizeListener(() => {
    ctx.scale(pixelRatio, pixelRatio);
  });