在 CodePen 上調整 window 的大小導致滾動條出現在全屏 canvas

Question

我有一個奇怪的問題，它以前工作過，問題出在 CodePen 上。 我有全尺寸 Canvas：

function width() {
  // why -1 ?
  // without this there is horizontal scrollbar
  // I have no idea what is causing this
  return window.innerWidth - 1;
}

// ---------------------------------------------------------------
function height() {
  return window.innerHeight;
}

var canvas = document.getElementsByTagName('canvas')[0];
canvas.width = width();
canvas.height = height();

我不確定是什么原因造成的，但如您所見，我已將-1添加到寬度，否則會出現水平滾動條。 我認為它以前有效，它發生在 GNU/Linux Chrome 上。

canvas 有display: block ，你可以在這個Matrix Rain Demo看到代碼，它在調試模式下工作正常。

這是 CodePen 的問題，任何人都知道為什么這個 1px。

這在 StackSnippets 中運行良好：

 function width() { return window.innerWidth; } // --------------------------------------------------------------- function height() { return window.innerHeight; } var canvas = document.getElementsByTagName('canvas')[0]; canvas.width = width(); canvas.height = height();

 canvas { display: block; } body { margin: 0; }

 <canvas></canvas>

編輯：

該問題僅出現在 window 的某些設備上。 要看到你需要慢慢調整大小。 對於我的（我有全高清筆記本電腦），它出現在例如：1594 但在 1595 工作。如果我使用 -1，滾動條在沒有它的情況下永遠不會出現，它會閃爍它以某些寬度顯示。

准確地說瀏覽器和操作系統我有 Fedora 32 和谷歌 Chrome 穩定版（剛剛更新到84.0.4147.105 (Official version) (64-bit) ）

編輯2：

我的演示在 Stack Snippet 中工作，無需修復我的演示：

 var katagana = gen_unicode(0x30A1, 0x30F6); var hiragana = gen_unicode(0x3041, 0x3096); // --------------------------------------------------------------- class Matrix { constructor(canvas, { font_size = 14, width, height } = {}) { this._canvas = canvas; this._ctx = canvas.getContext('2d'); this._font_size = font_size; this._drops = []; this._columns = Math.floor(width / font_size); this._chars = katagana.concat(hiragana); this.resize(width, height); } random_char() { return rnd(this._chars); } render_char(char, x, y) { this._ctx.fillText(char, x, y); } start() { let frames = 0; this._run = true; const self = this; (function loop() { if (frames++ % 2 === 0) { self.render(); // slower render } if (self._run) { requestAnimationFrame(loop); } })() } stop() { this._run = false; } reset() { for (let x = 0; x < this._columns; x++) { this._drops[x] = 255; } } resize(width, height) { this._width = width; this._height = height; this._canvas.height = height; this._canvas.width = width; this.reset(); } clear() { this._ctx.fillStyle = 'rgba(0, 0,0,0.05)'; this._ctx.fillRect(0, 0, this._width, this._height); this._ctx.fillStyle = '#0F0'; this._ctx.font = this._font_size + "px monospace"; } render() { this.clear(); for (let col = 0; col < this._drops.length; col++) { const char = this.random_char(); const x = col * this._font_size; const y = this._drops[col] * this._font_size; this.render_char(char, x, y); if (y > this._height && Math.random() >.975) { this._drops[col] = 0; } this._drops[col]++; } } } // --------------------------------------------------------------- //:: Init code // --------------------------------------------------------------- var canvas = document.getElementsByTagName('canvas')[0]; const matrix = new Matrix(canvas, { font_size: 14, width: width(), height: height() }); matrix.start(); window.addEventListener('resize', e => { matrix.resize(width(), height()); }); // --------------------------------------------------------------- //:: Utils // --------------------------------------------------------------- function gen_unicode(start, end) { var chars = []; for (var i = start; i <= end; ++i) { chars.push(String.fromCharCode(i)); } return chars; } // --------------------------------------------------------------- function rnd(array) { return array[Math.floor(Math.random() * array.length)] } // --------------------------------------------------------------- function width() { // why -1? // without this there is horizontal scrollbar // I have no idea what is causing this return window.innerWidth; } // --------------------------------------------------------------- function height() { return window.innerHeight; }

 body { background: black; margin: 0; min-width: 100vw; min-height: 100vh; } canvas { display: block; margin: 0; }

 <canvas></canvas>

編輯： 1px 不是有或沒有它發生的修復。

Answer 1

這可能無法解決您的問題，但這里有一個不同的想法，以避免在調整大小時必須刷新 canvas。 您只需使用大寬度/高度屬性並考慮object-fit以避免失真（相關：對象適合如何與 canvas 元素一起工作？ ）

 var katagana = gen_unicode(0x30A1, 0x30F6); var hiragana = gen_unicode(0x3041, 0x3096); // --------------------------------------------------------------- class Matrix { constructor(canvas, { font_size = 14} = {}) { this._canvas = canvas; this._ctx = canvas.getContext('2d'); this._font_size = font_size; this._drops = []; this._columns = Math.floor(2000 / font_size); this._chars = katagana.concat(hiragana); this._width = 2000; this._height = 2000; this.reset(); } random_char() { return rnd(this._chars); } render_char(char, x, y) { this._ctx.fillText(char, x, y); } start() { let frames = 0; this._run = true; const self = this; (function loop() { if (frames++ % 2 === 0) { self.render(); // slower render } if (self._run) { requestAnimationFrame(loop); } })() } stop() { this._run = false; } reset() { for (let x = 0; x < this._columns; x++) { this._drops[x] = 255; } } clear() { this._ctx.fillStyle = 'rgba(0, 0,0,0.05)'; this._ctx.fillRect(0, 0, this._width, this._height); this._ctx.fillStyle = '#0F0'; this._ctx.font = this._font_size + "px monospace"; } render() { this.clear(); for (let col = 0; col < this._drops.length; col++) { const char = this.random_char(); const x = col * this._font_size; const y = this._drops[col] * this._font_size; this.render_char(char, x, y); if (y > this._height && Math.random() >.975) { this._drops[col] = 0; } this._drops[col]++; } } } // --------------------------------------------------------------- //:: Init code // --------------------------------------------------------------- var canvas = document.getElementsByTagName('canvas')[0]; const matrix = new Matrix(canvas, { font_size: 14 }); matrix.start(); // --------------------------------------------------------------- //:: Utils // --------------------------------------------------------------- function gen_unicode(start, end) { var chars = []; for (var i = start; i <= end; ++i) { chars.push(String.fromCharCode(i)); } return chars; } // --------------------------------------------------------------- function rnd(array) { return array[Math.floor(Math.random() * array.length)] }

 body { background: black; margin: 0; height:100vh; } canvas { width:100%; height:100%; display:block; object-fit:none; object-position:top left; }

 <canvas width="2000" height="2000"></canvas>

Answer 2

在 CodePen 博客全屏 Canvas上找到了 Chris Coyier 的這篇舊文章

這個解決方案是：

function resizeCanvas() {
  can.style.width = window.innerWidth + "px";
  setTimeout(function() {
    can.style.height = window.innerHeight + "px";
  }, 0);
}

這與以下內容相同：

function resizeCanvas() {
  canvas.width = window.innerWidth;
  setTimeout(function() {
    canvas.height = window.innerHeight;
  }, 0);
}

解決方案是還使用以下方法隱藏滾動條：

body {
  margin: 0;
  overflow: hidden;
}