Html 在CodePen上调整窗口大小会导致滚动条出现在全屏画布上

我有一个奇怪的问题，它以前工作过，问题在代码笔上。我有全尺寸帆布：

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上

画布上有

display:block

，您可以在这里看到代码，它在调试模式下工作正常

这是不是和代码笔有关，有人知道为什么这个1px

这在StackSnippets中运行良好：

函数宽度（）{
返回窗口.innerWidth；
}
// ---------------------------------------------------------------
函数高度（）{
返回窗口。内部高度；
}
var canvas=document.getElementsByTagName（'canvas'）[0]；
canvas.width=width（）；
canvas.height=height（）
画布{
显示：块；
}
身体{
保证金：0；
}
这可能无法解决您的问题，但这里有一个不同的想法，可以避免在调整大小时刷新画布。您只需使用大的宽度/高度属性，就可以考虑<代码>对象拟合< /代码>以避免失真（相关：）/p>

var katagana=gen_unicode（0x30A1，0x30F6）；
var hiragana=gen_unicode（0x3041，0x3096）；
// ---------------------------------------------------------------
类矩阵{
构造函数（canvas，{font_size=14}={}）{
这个._canvas=canvas；
这._ctx=canvas.getContext（'2d'）；
这个。字体大小=字体大小；
这个；
此._columns=Math.floor（2000/字体大小）；
这个。_chars=katagana.concat（平假名）；
这个宽度=2000；
这个高度等于2000；
这是reset（）；
}
随机字符（）{
返回rnd（此字符）；
}
渲染字符（字符，x，y）{
这个._ctx.fillText（char，x，y）；
}
开始（）{
设帧=0；
这个。_run=true；
const self=这个；
（函数循环（）{
如果（帧+++%2===0）{
self.render（）；//渲染速度较慢
}
如果（自行运行）{
请求动画帧（循环）；
}
})()
}
停止（）{
这是.\u run=false；
}
重置（）{
for（设x=0；xthis.\u height&&Math.random（）>.975）{
这个._下降[col]=0；
}
这个._删除[col]++；
}
}
}
// ---------------------------------------------------------------
//：：初始化代码
// ---------------------------------------------------------------
var canvas=document.getElementsByTagName（'canvas'）[0]；
常数矩阵=新矩阵（画布{
字体大小：14
});
matrix.start（）；
// ---------------------------------------------------------------
//：：乌拉尔
// ---------------------------------------------------------------
函数gen_unicode（开始、结束）{
var chars=[]；
for（var i=start；i在CodePen博客上找到了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;
}

在codepen上也可以（至少对我来说）@TemaniaAfif可能与我的浏览器有关。我有挂起的更新。如果重新启动后仍有效，将重新启动并删除。@TemaniaAfif对我来说在重新启动后仍然有效。请提供有关浏览器版本的详细信息then@TemaniAfif我更新了这个问题，可能是浏览器的错误，因为它只出现在特定的窗口宽度上。如果屏幕将大于2000px。在手机上渲染2000px也太过分了？顺便说一句：我问的是1px错误，不是关于调整大小，我正在为错误报告创建可复制的示例。@jcubic 1px错误肯定是由于调整大小功能和动态设置的宽度/高度。我提供了另一种方法来避免所有这些，并使用静态宽度/高度（这可能对其他人有帮助），正如您从堆栈代码段中看到的，这只发生在CodePen上，它在堆栈代码段上运行良好，所以您的示例不会修复任何问题，因为我的Matrix Rain在堆栈代码段中运行良好。不，我不想在移动设备上运行固定2000x2000画布。它作为示例很好，但对我没有用处。