Javascript 为什么“Wall.render（context）”只能单独工作？

我正在制作一台平板电脑。我试图在画布上渲染一组墙。如果

墙

直接由变量表示，则会渲染。但是，如果它在数组中，访问它然后渲染它是不起作用的

功能框（x、y、w、h）{
这个.x=x；
这个。y=y；
这个.w=w；
这个，h=h；
this.center=函数（）{
返回[x+w/2，y+h/2]；
}
}
功能墙（x、y、w、h）{
呼叫框（这个，x，y，w，h）；
此参数。设置={
颜色：“888”，
碰撞：对
}
this.render=函数（ctx）{
ctx.fillStyle=this.settings.color；
ctx.fillRect（x，y，w，h）；
}
}
var walls=[新墙（0350400400）]；
const context=Array.from（document.getElementsByTagName（“画布”））[0].getContext（“2d”）；
墙[0]。渲染（上下文）
您的两个代码段都正常工作，但您没有看到任何内容的原因是您没有指定
元素的大小。因此，您在
[新墙（0350400400）]
中设置的坐标将正方形渲染出画布边界，从而使其不可见

每当我将
Wall
构造函数的
x
和
y
值更改为
0
时，就会显示矩形


功能框（x、y、w、h）{
这个.x=x；
这个。y=y；
这个.w=w；
这个，h=h；
this.center=函数（）{
返回[x+w/2，y+h/2]；
}
}
功能墙（x、y、w、h）{
呼叫框（这个，x，y，w，h）；
此参数。设置={
颜色：“888”，
碰撞：对
}
this.render=函数（ctx）{
ctx.fillStyle=this.settings.color；
ctx.fillRect（x，y，w，h）；
}
}
var walls=[新墙（0,0,400,400）]；
const context=Array.from（document.getElementsByTagName（“画布”））[0].getContext（“2d”）；
墙[0]。渲染（上下文）
我后来发现画布只渲染其宽度和高度范围内的内容。因此，HTML更改为

<canvas width="400" height="300"></canvas>



或者任意的宽度和高度。
你是说这两种情况都不起作用吗？@FelixKling-yup。