Javascript putimagedata绘制像素数据4次/不缩放

我最近在twitch上观看了Notch的一些流，几年前对他在Ludum Dare挑战赛中的一种渲染技术很感兴趣。我尝试将他的java代码转换为javascript，但遇到了一些问题，这是因为我还不熟悉ctx.putimagedata的原始创建像素值

为什么此应用程序绘制了4次预期输出，但没有缩放到窗口？由于数组的形状，我应该用4的乘法或除数进行迭代，但我缺少了什么吗？我很困惑，所以就把这个贴在这里。我发现的唯一修复方法是将this.width和this.height调整为4，但这超出了我认为的范围，导致性能变得糟糕，并不是解决问题的有效方法

有关类别：

document.addEventListener（'DOMContentLoaded'，（）=>{
//设置
document.body.style.margin=0；
document.body.style.overflow=`hidden`；
const canvas=document.createElement（'canvas'）；
document.body.appendChild（画布）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
const ctx=canvas.getContext（“2d”）；
ctx.fillRect（0，0，canvas.width，canvas.height）；
//全球助手
常量randomint=（下、上）=>{
返回Math.floor（（Math.random（）*上+1）+下）；
}
常量genrandomcolor=（）=>{
返回[randomint（0255），randomint（0255），randomint（0255），1/randomint（1，2）]；
}
类应用程序{
构造函数（）{
这个比例=15；
this.width=window.innerWidth；
this.height=window.innerHeight；
此参数为.pixels=[]；
这个.fov=10；
这是1.ub=0；
这是1.lr=0；
此参数为0.keys={
上：错，
唐：错，
左：错，
右：错
}
这个速度=4；
}
更新（）{
this.keys.up？this.ub++：null；
this.keys.down？this.ub-：null；
this.keys.left？this.lr-：null；
this.keys.right？this.lr++：null；
}
画（）{
这个.drawspace（）
}
绘图空间（）{
for（设y=0；y{
e、 keyCode==37？app.keys.left=true:null；
e、 keyCode==38？app.keys.up=true:null；
e、 keyCode==39？app.keys.right=true:null；
e、 keyCode==40？app.keys.down=true:null；
})
document.addEventListener（“keyup”，e=>{
e、 keyCode==37？app.keys.left=false:null；
e、 keyCode==38？app.keys.up=false:null；
e、 keyCode==39？app.keys.right=false:null；
e、 keyCode==40？app.keys.down=false:null；
})
//游戏循环
常数fps=60；
常数间隔=1000/fps；
让then=Date.now（）；
让我们现在开始；
让三角洲；
常量动画=时间=>{
window.requestAnimationFrame（动画）；
now=Date.now（）；
delta=现在-那时；
如果（增量>间隔）{
然后=现在-（增量%间隔）
ctx.fillStyle='黑色'；
ctx.fillRect（0，0，window.innerWidth，window.innerHeight）；
app.update（）；
app.draw（）；
}
}
制作动画（）；
})；

ImageData.data对象是一个Uint8ClampedArray，表示每个像素的4个红色、绿色、蓝色和Alpha通道，每个通道表示为8位（值范围为0-255）

这意味着要设置像素，需要独立设置其4个通道：

const r = data[0];
const g = data[1];
const b = data[2];
const a = data[3];

这表示图像数据的第一个像素（位于左上角）。
因此，为了能够循环所有像素，我们需要创建一个循环，允许我们从一个像素到另一个像素。这是通过一次迭代4个索引来完成的：

for(
   let index = 0;
   index < data.length;
   index += 4 // increment by 4
) {
  const r = data[index + 0];
  const g = data[index + 1];
  const b = data[index + 2];
  const a = data[index + 3];
  ...
}

用于(
设指数=0；
指数

现在，将按需要遍历每个像素：

//设置
document.body.style.margin=0；
document.body.style.overflow=`hidden`；
const canvas=document.createElement（'canvas'）；
document.body.appendChild（画布）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
const ctx=canvas.getContext（“2d”）；
ctx.fillRect（0，0，canvas.width，canvas.height）；
//全球助手
常量randomint=（下、上）=>{
返回Math.floor（（Math.random（）*上+1）+下）；
}
常量genrandomcolor=（）=>{
返回[randomint（0255），randomint（0255），randomint（0255），1/randomint（1，2）]；
}
类应用程序{
构造函数（）{
这个比例=15；
this.width=window.innerWidth；
this.height=window.innerHeight；
此参数为.pixels=[]；
这个.fov=10；
这是1.ub=0；
这是1.lr=0；
此参数为0.keys={
上：错，
唐：错，
左：错，
右：错
}